創建一個新div給它的innerhtml屬性的現有div

-1

我一直在這個問題上沒有辦法，並決定分享這個問題。我有包括不同發送方的兩個div的聊天應用如圖創建一個新div給它的innerhtml屬性的現有div

<div style="margin-left:8px;" class="bubbledLeft" style="padding-left:5px;" id="chats-container"></div> 

<div style="margin-right:8px;" class="bubbledRight" style="padding-left:5px;" id="chats-container2"></div>

這是示例JavaScript，使用其的innerHTML屬性

function fetchAllChats() { 
     ..... 
     xhr.open('GET', encodeURI('/get-all-chats')); 
     xhr.onload = function (response) { 
      try { 
       if (xhr.status === 200) { 
        var json = JSON.parse(response.target.responseText); 
        var chats_container = document.getElementById('chats-container'); 
        var chats = ''; 
        ..... 
        chats_container.innerHTML = chats; 
       } else { 
        alert('Request failed. Returned status of ' + xhr.status); 
       } 
      } catch (e) { 
       console.log(e); 
      } 
     }; 
     xhr.send(); 
    }

我的挑戰如下所示附加的文本到一個div

FromA : hi 

      FromB : hello

如果FROMA類型你怎麼再做作爲響應，這是會發生什麼

FromA: hi 
     how do you do 
       FromB: hello

你可以看到，而不是創建一個新的div和附加是未來FromB下面的文字輸入的文字：你好它跳躍和重視FROMA的內容。請我怎麼解決這個正視使用JavaScript或CSS

來源

2016-08-24 user6731422

你的代碼不創建一個新的div，它只是獲得第一個div：' var chats_container = document.getElementById（'chats-container'）'。聽起來你想改變這條線來創建一個新的div。 – Riaz

是的，這是挑戰 – user6731422

你有沒有嘗試任何代碼來做到這一點？你有沒有找到這個API？ https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement – Riaz

要連接的所有消息document.getElementById('chats-container')，這是你所列出的第一個div。

你需要做的是檢查json[i].user.name針對登錄的用戶和使用適當的內部div的類。

HTML：

<div id="chats-container"></div>

在你的函數：

var theUser = "Myself"; // replace with logged in user 
var chats = '', theClass; 
for (var i = 0; i < json.length; i++) { 
    theClass = json[i].user.name == theUser ? "rightBubble" : "leftBubble"; 
    chats += '<div class="' + theClass + '"><strong>' + json[i].user.name + ':</strong> <span>' + json[i].message + '</span></div>'; 
} 
document.getElementById('chats-container').innerHTML = chats;

結果：

<div id="chats-container"></div> 
    <div class="leftBubble">...</div> 
    <div class="rightBubble">...</div> 
    ... 
</div>

來源

2016-08-24 15:07:55

簡直太棒了，直觀 – user6731422

你可能會尋找appendChild功能：

chats_container.appendChild(<<THE NEW CHAT MESSAGE DIV>>);

來源

2016-08-24 15:05:11

appendChild - 內容消失 – user6731422

TypeError：Node.appendChild的參數1不是一個對象。 – user6731422

appendChild將文檔元素作爲參數。看到下面的小提琴 https://jsfiddle.net/rdf1e0qm/ –

創建一個新div給它的innerhtml屬性的現有div

回答

相關問題