我创建了一个在 HTMLdiv元素中创建内部元素的脚本。它工作正常，但我认为我使用字符串的方式在 JavaScript 中不是最合适的。HTML<body> <div class="chart-container"> <div class="chartlyrics">...</div><div class="chartlyrics box" id="powered_by"></div> </div> </body>“ ... ”所在的位置是我创建元素的位置。Javascriptdocument.getElementsByClassName('chartlyrics')[0].innerHTML = '<img src="img/103-logo.jpg" class="" /><br />Powered by 'HTML 结果：<body> <div class="chart-container"> <div class="chartlyrics"><img src="img/103-logo.jpg" class="" /><br />Powered by </div><div class="chartlyrics box" id="powered_by"></div> </div> </body>在 JavaScript 中创建元素时如何不使用字符串来执行此操作？我试过了，但它给了我一个语法错误：document.getElementsByClassName('chartlyrics')[0].innerHTML = '' var img = document.getElementsByClassName('chartlyrics') .appendChild(document.createElement("img")); img.src = "img/103-logo.jpg"img.class = ""img.textContent = 'Powered by ' console.log(document.getElementsByClassName('chartlyrics')[0].innerHTML);结果：document.getElementsByClassName (...). appendChild is not a function
1 回答
慕桂英546537
TA贡献1848条经验 获得超10个赞
您需要访问 HTMLCollection 的第一个元素并将该<img>元素附加到该元素。此外，首先将新创建的元素存储在变量中，以便您可以在附加之前设置属性。要在图像后添加换行符和文本，您可以附加新创建的<br>元素并用于.append添加文本。
const parent = document.getElementsByClassName('chartlyrics')[0];
parent.innerHTML = '';
var img = document.createElement("img");
img.src = "img/103-logo.jpg"
img.setAttribute('class', "")
parent.appendChild(img);
parent.appendChild(document.createElement('br'));
parent.append('Powered by ');
但是，查找具有特定类的每个单个元素以仅获取一个元素是非常浪费的。您应该使用document.querySelectorto 获取与选择器匹配的第一个元素。
const parent = document.querySelector('.chartlyrics');
parent.innerHTML = '';
var img = document.createElement("img");
img.src = "img/103-logo.jpg"
img.setAttribute('class', "")
parent.appendChild(img);
parent.appendChild(document.createElement('br'));
parent.append('Powered by ');
添加回答
举报
0/150
提交
取消