在下面的例子中，我在HTML代码中有一个父元素，我使用createChild函数将span元素和class 'child'嵌入到父元素中。在后面的代码中，我将更改子元素的内容。
我知道这是行不通的，因为querySelector甚至在创建子元素之前就运行了，一个简单的解决方案是在创建子元素之后选择它（例如，在createChild函数之后使用querySelector选择子元素）。但是我需要一些其他的解决方案来解决这个问题，因为我喜欢在代码的开头选择DOM元素，而不是在代码的末尾选择DOM元素。我不想在我的代码之间使用querySelectors。
我真的很感激一个简单有效的解决这个问题，因为我经常面对这个问题。
HTML
<html lang="en">
<head>
<title>example code</title>
</head>
<body>
<div class="parent"></div>
</body>
<script src="script.js"></script>
</html>Javascript语言
// Selecting DOM Element
const parentEl = document.querySelector(".parent");
console.log(parent);
const childEl = document.querySelector(".child");
//Functionality
const createChild = function(){
const innerHtml = `<span class = 'child'> Child Element </span>`;
parentEl.insertAdjacentHTML("afterbegin", innerHtml);
}
createChild();
childEl.textContent = "change content"; //Not Working我把选择子元素的行移到函数之后，它就可以工作了，但是我真的希望我的querySelectors在我的代码的顶部，这样它就更有组织，而不是在我的代码的任何地方。所以，我正在寻找更多的方法来达到同样的结果。
// Selecting DOM Element
const parentEl = document.querySelector(".parent");
console.log(parent);
//Functionality
const createChild = function () {
const innerHtml = `<span class = 'child'> Child Element </span>`;
parentEl.insertAdjacentHTML("afterbegin", innerHtml);
};
createChild();
const childEl = document.querySelector(".child");
childEl.textContent = "change content"; // Working
1条答案
按热度按时间2skhul331#
您可以选择使用
createElement函数创建span元素，而不是使用HTML，然后将该元素作为返回值：这在我看来很符合逻辑：该函数返回它插入到文档中的内容。