logo标签列表

在父元素开头添加DOM元素

javascriptajax
4

我有以下的javascript代码，可以将AJAX响应插入到ID为results的div中：

document.getElementById("results").innerHTML=xmlhttp.responseText;

然而，这会在已经存在的所有元素后面添加新元素。我需要新元素插入到所有其他元素之前。

我知道这可能非常微不足道，但我自己似乎找不到任何方法来实现它。

感谢任何帮助！

4
不，它不会。它会取代它们。 - Quentin
可能是重复的问题：如何使用JavaScript在锚点之前插入元素。 - Gordon
现在，每个 AJAX 响应都会添加到 div 中。 - lampwins
可能是https://dev59.com/93RA5IYBdhLWcg3wzhbZ的重复问题。 - Tim
1
请指出为什么http://stackoverflow.com/search?q=insert+before+javascript中的任何一个都没有帮助回答您的问题。 - Gordon
4个回答
17

使用现代JavaScript，您可以利用prepend方法。目前caniuse.com显示只有IE、Edge和OperaMini不支持。

ParentNode.prepend(nodesToPrepend);

例如，

ParentNode.prepend(newDiv);

此外，它会自动将文本转换为文本节点，因此您可以针对您的用例执行以下操作：

document.getElementById("results").prepend(xmlhttp.responseText);
4

我记不清确切的语法，但大概像这样：

var newDiv = document.createElement("div");
newDiv.innerHTML=xmlhttp.responseText;
document.getElementById("results").childNodes.addAt(0,newDiv);

如果你会使用jQuery，那么这很简单，只需如下操作：
$("#results").prepend(xmlhttp.responseText);
“属性'addAt'在类型'NodeListOf <Node＆ChildNode>'上不存在。” - CrazyVideoGamer
当你不知道正确的语法时，最好不要添加答案。 - Ben Davis
childNodes 是一个只读属性，你不能向其中添加元素。 - royaltm
4
您想要的是这个。
results.insertAdjacentHTML( 'beforebegin', xmlhttp.responseText );

或者这样

results.insertAdjacentHTML( 'afterbegin', xmlhttp.responseText );

（变量results当然是对DOM元素的引用）
因此，第一个将在元素本身之前（作为上一个同级）插入新内容，而第二个将在任何其他子元素之前将其插入到元素内部。
0
我正在探索有关清除JS的问题，这里是一个示例，我如何通过简单的节点操作来解决问题。这可能是正确的方法，也可能不是。有两个选项都可以工作。 

const userInput = document.getElementById('input-number');
const history = document.getElementById('history');
const addBtn = document.getElementById('btn-add');

function getUserInput(){
  return parseInt(userInput.value);
}

function add(){
  let userInsert = getUserInput();
  let elementToAdd = document.createElement("p");
  elementToAdd.textContent = userInsert;
  /* option one */
  //if (history.hasChildNodes()){
  //  history.insertBefore(elementToAdd, history.firstChild);
  //} else {
  //  history.appendChild(elementToAdd);
  //}
  /* option two */
  history.insertAdjacentHTML("afterbegin", `<p>${elementToAdd.textContent}</p>`);
}

addBtn.addEventListener('click', add);
#history {
  margin: 1rem;
  width: 40rem;
  max-width: 90%;
  border: 1px solid #023d6d;
  border-radius: 10px;
  padding: 1rem;
  color: #023d6d;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/js/bootstrap.bundle.min.js"></script>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Basics</title>
    <link
      href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap"
      rel="stylesheet"
    />
  </head>
  <body class="container">
    <header>
      <h1>Add History</h1>
    </header>
    <div class="row">
      <div class="col-sm-11">
        <input class="form-control" type="number" id="input-number" placeholder="Enter content here"/>
      </div>
      <div class="col-sm-1">
        <button type="button" class="btn btn-primary" id="btn-add">+</button>
      </div>
    </div>
    <div class="row">
      <div class="col-md-12">
        <div class="content-container">
          <section id="history"></section>
          </div>
      </div>
    </div>
  </body>
</html>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接