В настоящее время я изучаю DOM и обнаружил, что следующую задачу довольно сложно выполнить должным образом. Предполагается, что код js:
function myFunctionAdd() {
var node = document.createElement("outerDiv");
var textnode = document.createTextNode("My Vertical Div#");
node.appendChild(textnode);
document.getElementById("add").appendChild(node);
}
function myFunctionRem() {
document.getElementById("innerDiv1").outerHTML = "";
}
function myFunctionColour() {
document.getElementsByTagName("z4")[0].setAttribute("class", "democlass");
}
function myFunctionChangeText() {
var x = "a new txt";
for (var i = 0; i < 4; i++){
document.getElementById("innerDiv1").innerHTML = x;
}
}
.democlass {
color: blue;
}
<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title>Tytul dokumentu</title>
<meta http-equiv = "content-type" content = "text/html;charset=utf-8" />
<link rel = "stylesheet" href = "styles.css">
</head>
<body>
<header>
<button onclick = "myFunctionAdd()">New div</button>
<button onclick = "myFunctionRem()">Remove divs</button>
<button onclick = "myFunctionColour()">Colour change</button>
<button onclick = "myFunctionChangeText()">Div's new text</button>
</header>
<ul>
<li id = "">
<div class = "innerDiv1" myattr = "">
<p> My Vertical Div1 </p>
</div>
</li>
<li>
<div class = "innerDiv1" myattr = "">
<p>My Vertical Div2 </p>
</div>
</li>
<li>
<div class = "innerDiv1" myattr = "4">
<z4>My Vertical Div3 </z4>
</div>
</li>
<li id = "add">
<div class = "innerDiv" myattr = "">
<p>My Vertical Div4</p>
</div>
</li>
</ul>
</body>
</html>
Также вы не можете повторять идентификаторы элементов, они уникальны по определению. Вместо этого используйте общий класс для повторяющихся элементов
спасибо, я внес некоторые изменения.
Вот рабочая версия, лучше всего сравнивающая различия, чтобы увидеть, что было изменено.
Использование div в качестве дочернего элемента <ul> недопустимо, оно должно быть <li>
Такие теги, как <z4>, не являются частью стандарта HTML, и хотя вы можете создавать свои собственные теги, они должны быть правильно зарегистрированы и следовать строгому соглашению об именах, чтобы предотвратить конфликты новых тегов HTML в будущем.
id элементов должен быть уникальным
<html>
<head>
<title>Tytul dokumentu</title>
<meta http-equiv = "content-type" content = "text/html;charset=utf-8" />
<link rel = "stylesheet" href = "styles.css">
<script>
function myFunctionAdd() {
var li = document.createElement("li");
var div = document.createElement("div");
var p = document.createElement("p");
li.appendChild(div);
div.appendChild(p);
p.textContent = "My Vertical Div#";
document.getElementById("list").appendChild(li);
}
function myFunctionRem() {
let list = document.getElementById("list");
let deleteChild = list.firstElementChild;
if (deleteChild) {
list.removeChild(deleteChild);
}
}
function myFunctionColour() {
let list = document.getElementById("list");
let items = list.children.length;
for (var i = 0; i < items; i++){
let li = list.children[i]
li.className = "democlass";
}
}
function myFunctionChangeText() {
var x = "a new txt";
let list = document.getElementById("list");
let items = list.children.length;
for (var i = 0; i < items; i++){
let li = list.children[i]
let div = li.firstElementChild;
let p = div.firstElementChild;
p.textContent = x;
}
}
</script>
</head>
<style>
.democlass {
color: blue;
}
</style>
<body>
<header>
<button onclick = "myFunctionAdd()">New div</button>
<button onclick = "myFunctionRem()">Remove divs</button>
<button onclick = "myFunctionColour()">Colour change</button>
<button onclick = "myFunctionChangeText()">Div's new text</button>
</header>
<ul id = "list">
<li>
<div id = "innerDiv1">
<p> My Vertical Div1 </p>
</div>
</li>
<li>
<div id = "innerDiv2">
<p>My Vertical Div2 </p>
</div>
</li>
<li>
<div id = "innerDiv3">
<p>My Vertical Div3 </p>
</div>
</li>
<li>
<div id = "innerDiv4">
<p>My Vertical Div4</p>
</div>
</li>
</ul>
</body>
</html>
На самом деле разрешено создавать пользовательские элементы в браузерах, которые их поддерживают, но сначала их необходимо правильно определить. Я сомневаюсь, что ОП готов к этому, хотя
Обновлена часть о пользовательских тегах
Честно говоря, я не думаю, что OP даже понял, что они использовали идентификатор другого элемента в createElement
, а не имя тега.
Вы начинаете с недопустимой структуры html.
<div>
не может быть прямым дочерним элементом<ul>
, а<li>
должен быть дочерним элементом<ul>
и не может быть дочерним элементом<div>