如何在javascript中动态创建html元素

Question

我有html页面，我想显示两个人之间的聊天内容，聊天框是这样的

<!-- right chat -->
<div class="chat__conversation-board__message-container reversed">
    <div class="chat__conversation-board__message__person">
        <div class="chat__conversation-board__message__person__avatar">
            <img src="./customer.jpg" alt="Dennis Mikle"/>
        </div>
        <span class="chat__conversation-board__message__person__nickname">Dennis Mikle</span>
    </div>
    <div class="chat__conversation-board__message__context">
        <div class="chat__conversation-board__message__bubble">
            <span>some text</span>
        </div>
    </div>
</div>

<!-- left chat -->
<div class="chat__conversation-board__message-container">
    <div class="chat__conversation-board__message__person">
        <div class="chat__conversation-board__message__person__avatar">
            <img src="./agent.jpg" alt="Monika Figi"/>
        </div>
        <span class="chat__conversation-board__message__person__nickname">Monika Figi</span>
    </div>
    <div class="chat__conversation-board__message__context">
        <div class="chat__conversation-board__message__bubble">
            <span>some text</span>
        </div>
    </div>
</div>

像这样的聊天内容的data.json

{
    "lyrics": [
        {
            "line": "line 1 start",
            "position": "r",
            "time": 4.5
        },
        {
            "line": "answer 1",
            "position": "l",
            "time": 9.03
        },
        {
            "line": "line 2 start",
            "position": "r",
            "time": 14.01
        }
    ]
}

我从服务器获取data.json并将其显示在index.html上，我想在我的体内创建position类型(left=l or right=r)的元素

Answer 1

要在 JavaScript 中动态创建 HTML 元素，您可以使用 document.createElement() 方法。

以下是如何使用此方法创建 div 元素并将其附加到文档正文的示例：

var div = document.createElement('div');

// Set some content for the div element
div.innerHTML = 'Hello, World!';

// Append the div element to the body of the document
document.body.appendChild(div);

此代码将创建一个新的 div 元素并将其内容设置为“Hello, World”。 然后将 div 元素附加到文档正文的末尾。

您还可以使用 setAttribute() 方法为元素设置属性，例如 id 或 class 属性：

var div = document.createElement('div');

// Set the id attribute for the div element
div.setAttribute('id', 'myDiv');

// Set some content for the div element
div.innerHTML = 'Hello, World!';

// Append the div element to the body of the document
document.body.appendChild(div);

此代码创建一个 div 元素，其 id 属性设置为“myDiv”，并将其内容设置为“Hello, World.”。

您还可以使用 appendChild() 方法将新创建的元素添加到页面上的现有元素，而不是将其附加到文档的主体。 例如：

var div = document.createElement('div');

// Set the id attribute for the div element
div.setAttribute('id', 'myDiv');

// Set some content for the div element
div.innerHTML = 'Hello, World!';

// Get a reference to an existing element on the page
var existingDiv = document.getElementById('existingDiv');

// Append the new div element to the existing div element
existingDiv.appendChild(div);

此代码创建一个新的 div 元素并将其附加到现有 Div 元素的末尾，该元素由其 id 属性标识。

我希望这有帮助。 如果您有任何问题，请告诉我。

Answer 2

这是我的示例代码供您参考：

 let data={ "lyrics": [ { "line": "line 1 start", "position": "r", "time": 4.5 }, { "line": "answer 1", "position": "l", "time": 9.03 }, { "line": "line 2 start", "position": "r", "time": 14.01 } ] } function go(){ let container; data.lyrics.forEach(lyric=>{ if (lyric.position === 'r') { container=document.querySelector(".right.chat__conversation-board__message__bubble"); } else { container=document.querySelector(".left.chat__conversation-board__message__bubble"); } container.innerHTML+="<div>"+lyric.line+"</div>"; }) }

 <div class="chat__conversation-board__message-container reversed right"> <div class="chat__conversation-board__message__person"> <div class="chat__conversation-board__message__person__avatar"> <img src="./customer.jpg" alt="Dennis Mikle" /> </div> <span class="chat__conversation-board__message__person__nickname">Dennis Mikle</span> </div> <div class="chat__conversation-board__message__context"> <div class="chat__conversation-board__message__bubble"> <span>some text</span> </div> </div> </div> <.-- left chat --> <div class="chat__conversation-board__message-container left"> <div class="chat__conversation-board__message__person"> <div class="chat__conversation-board__message__person__avatar"> <img src="./agent.jpg" alt="Monika Figi" /> </div> <span class="chat__conversation-board__message__person__nickname">Monika Figi</span> </div> <div class="chat__conversation-board__message__context"> <div class="chat__conversation-board__message__bubble"> <span>some text</span> </div> </div> </div> <button onclick="go()"> Go </button>

我在容器的类名中添加了“right”和“left”。

因此，我可以根据“位置”属性来选择合适的容器来存储新内容。