英文:
How "access" a newly created div element in a script which ran before the element creation?
问题
假设我有一个HTML页面
<html>
<body>
<button onclick="add_product()">
ADD
</button>
<script type="text/javascript" src="static/script1.js"></script>
<script type="text/javascript" src="static/script2.js"></script>
</body>
</html>
其中 `script1.js` 是
function add_product(){
const add_product_div = document.createElement("div");
add_product_div.id = "add_product";
add_product_div.className = "draggable_box";
add_product_div.innerHTML="<h1> hey </h1> <p> whatevea </p> ";
document.body.appendChild(add_product_div);
}
现在，我该如何在 `script2.js` 中访问新创建的 `draggable_box` div？
div = document.getElementsByClassName("draggable_box");
console.log(div)
英文:
Suppose I have an html page
<html>
<body>
<button onclick="add_product()">
ADD
</button>
<script type="text/javascript" src="static/script1.js"></script>
<script type="text/javascript" src="static/script2.js"></script>
</body>
</html>
where script1.js is
function add_product(){
const add_product_div = document.createElement("div");
add_product_div.id = "add_product";
add_product_div.className = "draggable_box";
add_product_div.innerHTML="<h1> hey </h1> <p> whatevea </p> ";
document.body.appendChild(add_product_div);
}
Now how can I access the newly created div draggable_box in script2.js
div = document.getElementsByClassName("draggable_box");
console.log(div)
console.log(div)
Gives a empty list as script2.js had already run before I added the element draggable_box.
I am new to web development! Essentially I want to use script2.js to make all the div I create draggable, I know how to do this when the script is run after the div is created. Please suggest the correct way to do this!
答案1
得分: 2
以下是您要翻译的内容：
There are many ways to handle this. Here are a few. The first would be most common and require the least effort. The other two would be somewhat unusual and I'm mostly including them to illustrate that there's more than one way to do this.
You could have your add_product function return the new div so the caller can do other stuff with it after it's created:
function add_product(){
const add_product_div = document.createElement("div");
add_product_div.id = "add_product";
add_product_div.className = "draggable_box";
add_product_div.innerHTML="<h1> hey </h1> <p> whatevea </p> ";
document.body.appendChild(add_product_div);
return add_product_div; // return the new div
}
function onProductButtonClick () {
const div = add_product(); // append a new div and get a reference to it
console.log(div); // do other stuff with the new div
}
const button = document.getElementById('addProductButton');
button.addEventListener('click', onProductButtonClick)
You could have add_product emit an event that other code can listen for:
function add_product() {
const add_product_div = document.createElement("div");
add_product_div.id = "add_product";
add_product_div.className = "draggable_box";
add_product_div.innerHTML = "<h1> hey </h1> <p> whatevea </p> ";
document.body.appendChild(add_product_div);
// emit a 'productadded' event
document.body.dispatchEvent(new CustomEvent(
'productadded',
{
detail: {
target: add_product_div
}
}
));
}
const button = document.getElementById('addProductButton');
button.addEventListener('click', add_product);
function onAdded(e) {
console.log(e.detail.target);
}
// listen for 'productadded' events
document.body.addEventListener('productadded', onAdded);
You could have a MutationObserver that alerts you when nodes get added to the DOM:
function add_product() {
const add_product_div = document.createElement("div");
add_product_div.id = "add_product";
add_product_div.className = "draggable_box";
add_product_div.innerHTML = "<h1> hey </h1> <p> whatevea </p> ";
document.body.appendChild(add_product_div);
}
function initObserver() {
const observer = new MutationObserver((mutationList) => {
for (const mutation of mutationList) {
console.log(mutation.addedNodes[0]);
}
});
observer.observe(document.body, {
childList: true
});
}
window.addEventListener('load', initObserver);
const button = document.getElementById('addProductButton');
button.addEventListener('click', add_product);
希望这对您有所帮助。如果您有任何其他问题，请随时提问。
英文:
There are many ways to handle this. Here are a few. The first would be most common and require the least effort. The other two would be somewhat unusual and I'm mostly including them to illustrate that there's more than one way to do this.
You could have your add_product function return the new div so the caller can do other stuff with it after it's created:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
function add_product(){
const add_product_div = document.createElement("div");
add_product_div.id = "add_product";
add_product_div.className = "draggable_box";
add_product_div.innerHTML="<h1> hey </h1> <p> whatevea </p> ";
document.body.appendChild(add_product_div);
return add_product_div; // return the new div
}
function onProductButtonClick () {
const div = add_product(); // append a new div and get a reference to it
console.log(div); // do other stuff with the new div
}
const button = document.getElementById('addProductButton');
button.addEventListener('click', onProductButtonClick)
<!-- language: lang-html -->
<button id="addProductButton">Add Product</button>
<!-- end snippet -->
You could have add_product emit an event that other code can listen for:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
function add_product() {
const add_product_div = document.createElement("div");
add_product_div.id = "add_product";
add_product_div.className = "draggable_box";
add_product_div.innerHTML = "<h1> hey </h1> <p> whatevea </p> ";
document.body.appendChild(add_product_div);
// emit a 'productadded' event
document.body.dispatchEvent(new CustomEvent(
'productadded',
{
detail: {
target: add_product_div
}
}
));
}
const button = document.getElementById('addProductButton');
button.addEventListener('click', add_product);
function onAdded(e) {
console.log(e.detail.target);
}
// listen for 'productadded' events
document.body.addEventListener('productadded', onAdded);
<!-- language: lang-html -->
<button id="addProductButton">Add Product</button>
<!-- end snippet -->
You could have a MutationObserver that alerts you when nodes get added to the DOM:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
function add_product() {
const add_product_div = document.createElement("div");
add_product_div.id = "add_product";
add_product_div.className = "draggable_box";
add_product_div.innerHTML = "<h1> hey </h1> <p> whatevea </p> ";
document.body.appendChild(add_product_div);
}
function initObserver() {
const observer = new MutationObserver((mutationList) => {
for (const mutation of mutationList) {
console.log(mutation.addedNodes[0]);
}
});
observer.observe(document.body, {
childList: true
});
}
window.addEventListener('load', initObserver);
const button = document.getElementById('addProductButton');
button.addEventListener('click', add_product);
<!-- language: lang-html -->
<button id="addProductButton">Add Product</button>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论