英文:
getElementById on a Dynamically Created Element That Is NOT a Button
问题
index.js
// 所有内容都附加到这个div中。
const content = document.createElement('div');
content.setAttribute('id', 'content');
function component(focus) {
content.appendChild(nav());
content.appendChild(tabs());
content.appendChild(pageLoad(focus));
return content;
}
document.body.appendChild(component("home"));
let cont = document.getElementById('main-section');
document.getElementById('tab1').addEventListener('click', (e) => {
content.removeChild(cont);
content.appendChild(pageLoad("home"));
});
document.getElementById('tab2').addEventListener('click', (e) => {
content.removeChild(cont);
content.appendChild(pageLoad("about"));
});
pageLoad.js
import home from "./pages/home";
import about from "./pages/about";
export default function pageLoad(focus) {
const content = document.createElement('section');
content.setAttribute('class', 'main');
content.setAttribute('id', 'main-section');
if (focus == "home") {
content.appendChild(home());
} else if (focus == "about") {
content.appendChild(about());
}
return content;
};
英文:
I have made a page with tabbed browsing. I have the page set to re-populate the page based on which tab is clicked. I do this using JavaScript.
I select the section that is to be re-populated using getElementById. When a tab is clicked, the section is removed using its parent node and re-inserted using JavaScript. However, when trying to click a tab complete the same action, I get an error that states "Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node."
I understand this is due to the element being created dynamically.
After researching I found that event delegation could be a solution. However, for the examples I've found they involve handling button clicks on dynamic elements. I'm trying to select an element that is created as a result of clicking any of the tab buttons.
This is my code
index.js
import pageLoad from './pageLoad';
import nav from "./headers/nav";
import tabs from "./headers/tabs";
//All content is appended to this div.
const content = document.createElement('div');
content.setAttribute('id', 'content');
function component(focus) {
content.appendChild(nav());
content.appendChild(tabs());
content.appendChild(pageLoad(focus));
return content;
}
document.body.appendChild(component("home"));
let cont = document.getElementById('main-section');
document.getElementById('tab1').addEventListener('click', (e) => {
content.removeChild(cont);
content.appendChild(pageLoad("home"));
});
document.getElementById('tab2').addEventListener('click', (e) => {
content.removeChild(cont);
content.appendChild(pageLoad("about"));
});
pageLoad.js
import home from "./pages/home";
import about from "./pages/about";
export default function pageLoad(focus) {
const content = document.createElement('section');
content.setAttribute('class', 'main');
content.setAttribute('id', 'main-section');
if (focus == "home") {
content.appendChild(home());
}
else if (focus == "about") {
content.appendChild(about());
}
return content;
};
答案1
得分: 0
这是你要翻译的内容：
"Found a solution to this. Simply move the cont variable inside the event listeners so that it is initialized every time the button is clicked. This allows the main-section element to be re-selected each time even though it has been dynamically created.
index.js
document.getElementById('tab1').addEventListener('click', () => {
//select the element every time since it is dynamically re-created on click
let cont = document.getElementById('main-section');
content.removeChild(cont);
content.appendChild(pageLoad("home"));
});
document.getElementById('tab2').addEventListener('click', () => {
let cont = document.getElementById('main-section');
content.removeChild(cont);
content.appendChild(pageLoad("menu"));
});
```"
<details>
<summary>英文:</summary>
Found a solution to this. Simply move the **cont** variable inside the event listeners so that it is initialized every time the button is clicked. This allows the **main-section** element to be re-selected each time even though it has been dynamically created.
index.js
document.getElementById('tab1').addEventListener('click', () => {
//select the element every time since it is dynamically re-created on click
let cont = document.getElementById('main-section');
content.removeChild(cont);
content.appendChild(pageLoad("home"));
});
document.getElementById('tab2').addEventListener('click', () => {
let cont = document.getElementById('main-section');
content.removeChild(cont);
content.appendChild(pageLoad("menu"));
});
</details>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论