javascript - 如何使用 JavaScript 向元素添加唯一 ID？

Question

我想为“chatSubmit”函数内的每个段落元素添加唯一的 id，如下面的代码所示。 DOM 是动态生成的，段落有一个 ID textDisplay，对于新添加的 DOM 元素，该 ID 必须不同。

这是 fiddle 中的演示: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);
 }

Answer 1

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

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