18910140161

Html

首页 >> 前端开发 >> Html

按html标记封装元素

顺晟科技

2021-08-04 11:23:05

270

我有这段代码，它按我想要的方式运行。目标是用粗体标记封装元素（“test”）。我只想知道是否有任何一个构建方法来封装元素的html标记？类似于InsertMexpreentTML，但是InsertMexpreentTML会自动关闭标记。因此，在本例中，我不能执行2x insertmarkinenthtml(的afterbegin，的beforeend)。

我可以毫无问题地使用下面的代码，我只是好奇是否有方法封装元素。

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="text" onClick=makebold()> TEST </div> <script> function makebold() { var text = document.getElementById("text").innerHTML ; text = "<b>"+text+"</b>"; document.getElementById("text").innerHTML = text; } </script> </body> </html>

顺晟科技：

可以使用document.createElement创建<b>，将其追加到父级，并将父级最初存在的子级追加到该父级。

function makebold() { const parent = document.getElementById("text"); parent.appendChild(document.createElement('b')).appendChild(parent.childNodes[0]); } <div id="text" onClick=makebold()> TEST </div>

此快捷方式之所以有效，是因为appendChild返回追加的节点。因此parent.appendChild(document.createElement('b'))将返回创建的<b>，然后可以对该<b>.

调用appendChild
  • TAG：
上一篇：[动画小乐] HTML CSS白云飘 下一篇：通过JavaScript发送邮件，单
相关文章
推荐阅读
随机推荐
我们已经准备好了，你呢？
获取网站建设报价
2024我们与您携手共赢，为您的企业形象保驾护航！