Question

在我的页面上，我有：

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

我想添加这种类型的按钮＆＃39;使用JS：

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

我尝试使用document.createElement，但我不确定如何使其不仅仅是将其作为文本附加。我该怎么做？

Answer 1

像这样的东西，你可以通过函数参数传递你的元素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>

Answer 2

使用document.createElement创建指定的HTML元素。然后，您可以使用Node.appendChild函数将这些元素附加到#something根元素。您还可以使用Element.innerHTML来获取或设置元素中包含的HTML标记。

Node.appendChild（）方法将节点添加到指定父节点的子节点列表的末尾。

const something = document.getElementById('something');

// creating the span element, then add a class attribute
const span = document.createElement('span');
span.setAttribute('class', 'picon-p-add-news');
span.innerHTML = 'span'; // some text to improve visualization

// create the anchor element with the href attribute
const a = document.createElement('a');
a.setAttribute('href', '/news_events/');

// append the span element inside the <a>
a.appendChild(span);
a.innerHTML += 'anchor'; // add extra text for display

// add the <a> element tree into the div#something
something.appendChild(a);

#something {
  border: 1px solid;
  text-align: center;
  font-size: 2rem;
}
#something > a {
  padding: 8px;
}
.picon-p-add-news {
  background: red;
  padding: 0 4px;
}

<div id="something"></div>

Answer 3

1）创建一个元素：

var aEl = document.createElement('a');
aEl.href = "/news_events/"

2）创建span元素：

var spanEl = document.createElement('span');
spanEl.classList.add('picon-p-add-news');

3）将span元素追加到元素

aEl.appendChild(spanEl);

4）在元素中插入文本

aEl.insertAdjacentText('beforeend','Read more news');

5）将整棵树附加到div

var divEl = document.getElementById('something');
divEl.appendChild(aEl);

Answer 4

喜欢这个？您可以使用innerHTML属性在元素

中添加HTML

＆＃13;

document.getElementById("something").innerHTML += '<a href="/news_events/"><span class="picon-p-add-news"></span>Read more news</a>';

＆＃13;

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

＆＃13;

或者，如果您使用createElement将其创建为元素，则可以使用appendChild：

＆＃13;

let a = document.createElement("a");
a.setAttribute("href", "/news_events/");

let span = document.createElement("span");
span.setAttribute("class", "picon-p-add-news");


a.appendChild(span);

a.innerHTML += "Read more news";

document.getElementById("something2").appendChild(a);

＆＃13;

<div id="something2"></div>

＆＃13;

Answer 5

<html>
<head>
<style>
#myDIV {
    border: 1px solid black;
    margin-bottom: 10px;
}
</style>
</head>
<body>

<p>Click the button to create a P element with some text, and append it to DIV.</p>

<div id="myDIV">
A DIV element
</div>

<button onclick="myFunction()">Try it</button>

<script>
function myFunction() {
    var para = document.createElement("P");
    var t = document.createTextNode("This is a paragraph.");
    para.appendChild(t);
    document.getElementById("myDIV").appendChild(para);
}
</script>

</body>
</html>

尝试这样的东西：我使用https://www.w3schools.com/jsref/met_document_createelement.asp作为参考。

使用javascript向现有DIV添加按钮

5 个答案: