为了账号安全,请及时绑定邮箱和手机立即绑定

从 JavaScript 正确地将 img src 添加到 html

从 JavaScript 正确地将 img src 添加到 html

芜湖不芜 2023-01-06 16:25:33

我创建了一个在 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

TA贡献1598条经验 获得超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 ');


查看完整回答
反对 回复 2023-01-06
  • 1 回答
  • 0 关注
  • 11 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信