如何在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”。

因此，我可以根據“位置”屬性來選擇合適的容器來存儲新內容。