从 JavaScript 正确地将 img src 添加到 html
我创建了一个在 HTMLdiv元素中创建内部元素的脚本。
它工作正常，但我认为我使用字符串的方式在 JavaScript 中不是最合适的。
HTML
<body>
<div class="chart-container">
<div class="chartlyrics">...</div><div class="chartlyrics box" id="powered_by"></div>
</div>
</body>
“ ... ”所在的位置是我创建元素的位置。
Javascript
document.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
您需要访问 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 ');
随时随地看视频慕课网APP
相关分类
JavaScript