javascript - 使用 javascript 向现有 DIV 添加按钮

标签 javascript

在我的页面上我有:

 <div id='something'></div>

我想使用 JS 将这种类型的“按钮”附加到它:

<a href="/news_events/"><span class="picon-p-add-news"></span>Read more news</a>

我尝试使用 document.createElement,但我不确定如何让它不只是作为文本附加。我该怎么做?

最佳答案

像这样,您可以在其中通过函数参数传递元素 ID 和 URL。

<!DOCTYPE html>
<html>
 <head>
  <script>
   function appendButton(elementId, url){
	var buttonEl = document.createElement("a");
	buttonEl.href = url;
	var buttonTextEl = document.createElement("span");
	buttonTextEl.className = "picon-p-add-news";
	buttonTextEl.innerText = "Read more news";
	buttonEl.appendChild(buttonTextEl);
	document.getElementById(elementId).appendChild(buttonEl);
   }
  </script>
 </head>
 <body>
   <div>    
    <button id="button">Click to add</button>
    <div id='something'></div>
   </div>
   <script>
      document.getElementById("button").addEventListener('click', () => appendButton("something", "/news_events/"));
   </script>
 </body>
</html>

关于javascript - 使用 javascript 向现有 DIV 添加按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49820106/

相关文章:

javascript - 从文本地址框创建链接以自动转到 Google map 街景

javascript - Canvas 上的抗锯齿文本

Javascript 更改对象数组中所有项目的属性

javascript - 如何用javascript知道输入位置

javascript - 如何在 html 中创建可扩展的 <li> 元素

javascript - 如果启动后互联网可用,如何使用预加载器加载外部 JavaScript?

javascript - 为什么在新窗口打开时提交表单?

javascript - 用jquery交替颜色?

javascript - 显示 hh :mm:ss on this code?(进度条)

javascript - 按父级排序(拓扑排序)和数组中元素的重要性