创建一个新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

回答

相关问题