如何在 JavaScript 中为创建的元素添加 ID？

Question

我原来的问题被另一个用户错误地标记为重复，但提供的链接没有回答问题的任何部分，所以我会问另一个。 制作站点构建器我遇到了一个问题，即按下 OK 时的提示值未用作创建的h1的文本。 为什么是这样？ 该类应用并创建了我想要的所有元素，但网站上根本不存在文本，并且代码中没有错误，因为一切正常。

 .new-hd { position: fixed; z-index: 5; bottom: 0; right: 0; } .new-para { position: fixed; z-index: 5; bottom: 0; left: 0; } .classic-hd { max-width: 100vw; width: 100vw; max-height: 15vh; height: 15vh; position: absolute; left: 0; top: 0; background-color: black; display: flex; align-items: center; } #classic-hd-txt { color: white; font-family: sans-serif; text-indent: 3vw; } .fa-times { color: white; position: absolute; top: 0.25vh; right: 1vw; z-index: 5; }

 <!DOCTYPE html> <html> <head> <title>Make a Site</title> <script src="https://code.jquery.com/jquery-3.4.1.js"></script> <link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css"> </head> <body> <button type="button" class="new-hd"> Make Header </button> <button type="button" class="new-para"> Make Paragraph </button> <script> $(document).ready(function() { $(".new-hd").click(function() { var newHdTxt = window.prompt("What would you like your Header Text to be?", "Enter Response Here"); var newHdCont = document.createElement("header"); var newHd = document.createElement("h1"); $(newHdCont).addClass("classic-hd"); $(newHd).addClass("classic-hd-txt"); document.getElementsByClassName("classic-hd-txt").innerHTML = newHdTxt; document.body.appendChild(newHdCont); newHdCont.appendChild(newHd); //alert(newTxt); }); $(".new-para").click(function() { document.createElement("p"); }); }); </script> </body> </html>

Answer 1

代表给出答案的 Nik，这是您解决此问题的方法。 而不是使用 DOM 选择器get.ElementsByClassName().innerHTML使用方法newHd.innerText = newHdTxt 。

Answer 2

使用 attr 函数添加 id 属性。像这样

$jqueryElement.attr('id', 'change_it_to_what_you_want_but_should_be_unique');

如何在 JavaScript 中为创建的元素添加 ID？

问题描述

2 个解决方案

解决方案1
1 2019-12-03 17:56:51

解决方案2
-3 2019-12-03 17:42:41

如何在 JavaScript 中为创建的元素添加 ID？

问题描述

2 个解决方案

解决方案1 1 2019-12-03 17:56:51

解决方案2 -3 2019-12-03 17:42:41

解决方案1
1 2019-12-03 17:56:51

解决方案2
-3 2019-12-03 17:42:41