javascript - 使用javascript向div中的元素添加唯一的ID

我想向函数'chatSubmit'中的每个段落元素添加唯一的ID，如下面的代码所示。 DOM是动态生成的，并且段落具有ID textDisplay，该ID必须与新添加的DOM元素不同。

这是小提琴中的演示：https://jsfiddle.net/phaneendra/89v4a7m3/

<div class="userlist">
    <ul>
        <li onclick="openChat(this)">user1</li>
                    <li onclick="openChat(this)">user2</li>
                    <li onclick="openChat(this)">user3</li>
                    <li onclick="openChat(this)">user4</li>
                    <li onclick="openChat(this)">user5</li>
    </ul>
</div>

<div id="main"></div>


function chatSubmit(form){
var sendInput = form.input;
if(sendInput.value != ""){
var message = sendInput.value;
var username = document.getElementById("username").innerHTML;
document.getElementById("textDisplay").innerHTML += username + ": " +message + "<br/>";
sendInput.value = "";
}else{
return false;
}
}

function openChat(userName){
    var user = document.createElement("div");
    user.className = "chat-app";
    user.innerHTML = '<form name="form"><div class="chat-icons"><div  class="username"><span id="username">'+userName.innerHTML+'</span></div> <div class="settings"></div></div><div class="chat-window"><p  id="textDisplay"></p></div><div class="chat-inputs"><input type="text" value="" id="input" /><input type="button" value="send" onClick = "chatSubmit(this.form)"/></div></form>';
    document.getElementById("main").appendChild(user);
 }

最佳答案

我已经更新了您的代码。
请检查更新的代码：

JS：

<script type="text/javascript">
    function chatSubmit(form, userId) {

       var Pid = "textDisplay"+userId;
        var sendInput = form.input;
        if (sendInput.value != "") {
            var message = sendInput.value;
            var username = document.getElementsByClassName(Pid)[0].innerHTML;
            document.getElementById(Pid).innerHTML += username + ": " + message + "<br/>";
            sendInput.value = "";
        } else {
            return false;
        }
    }

    function openChat(userName, userId) {

          var Pid = "textDisplay"+userId;
        var user = document.createElement("div");
        user.className = "chat-app";
        user.innerHTML = '<form name="form"><div class="chat-icons"><div class="username"><span class='+Pid+'>' + userName
        + '</span></div><div class="settings"></div></div><div class="chat-window"><p id="'+Pid+'"></p></div><div class="chat-inputs"><input type="text" value="" id="input" /><input type="button" value="send" onClick = "chatSubmit(this.form,'+userId+
            ')"/></div></form>';
        document.getElementById("main").appendChild(user);
    }
    </script>

HTML：

<ul>
            <li onclick="openChat('user1',1)">user1</li>
            <li onclick="openChat('user2',2)">user2</li>
            <li onclick="openChat('user3',3)">user3</li>
            <li onclick="openChat('user4',4)">user4</li>
            <li onclick="openChat('user5',5)">user5</li>
        </ul>

您可以通过将用户名和ID存储在一个数组中并循环来生成此html。

请参考here