Как заменить узел в маркированном списке?
Прочитал про узлы на сайте Javascript.ru
node.append(...nodes or strings) – добавляет узлы или строки в конец node,
node.prepend(...nodes or strings) – вставляет узлы или строки в начало node,
node.before(...nodes or strings) –- вставляет узлы или строки до node,
node.after(...nodes or strings) –- вставляет узлы или строки после node,
node.replaceWith(...nodes or strings) –- заменяет node заданными узлами или строками.
Нет примера как воспользоваться этим узлом node.replaceWith К примеру есть маркированный список,
<ul id="list1">
<li>Кофе</li>
<li>Чай</li></ul>
<li>Кола</li></ul>
<li>Виски</li></ul>
<li>Коньяк</li></ul>
Как именно сделать замену элемента узла, а не вставку в конец или вначало. Например третий элемент Кола поменять на Водка? |
denis_alekss,
чем вставка не угодила? вставили новое, удалили старое или переписали parent.replaceChild(newElem, node) |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Название документа</title>
</head>
<body>
<ul id="list1">
<li>Кофе</li>
<li>Чай</li>
<li>Кола</li>
<li>Виски</li>
<li>Коньяк</li></ul>
<ul id="list2"><li>Вода</li><li id="item2">Молоко</li></ul>
<p>Нажмите кнопку, чтобы переместить последний элемент списка</p>
<button onclick="foo()">Переместить</button>
<script>
var i = 1;
function foo() {
var elem = document.getElementById("list2").elem[2];
parent.replaceChild("Водка",elem[2])
}
</script>
</body>
</html>
Что-то не заменяется |
denis_alekss,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
</head>
<body>
<ul id="list1">
<li>Кофе</li>
<li>Чай</li>
<li>Кола</li>
<li>Виски</li>
<li>Коньяк</li>
</ul>
<script>
let li = document.querySelector('#list1 :nth-child(3)')
li.insertAdjacentHTML('afterend', '<li>Водка</li>');
li.remove()
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
</head>
<body>
<ul id="list1">
<li>Кофе</li>
<li>Чай</li>
<li>Кола</li>
<li>Виски</li>
<li>Коньяк</li>
</ul>
<script>
let li = document.querySelector('#list1 :nth-child(3)');
let f = document.createElement('li');
f.append('Водка');
li.replaceWith(f);
</script>
</body>
</html>
|
Цитата:
|
denis_alekss,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
</head>
<body>
<ul id="list1">
<li>Кофе</li>
<li>Чай</li>
<li>Кола</li>
<li>Виски</li>
<li>Коньяк</li>
</ul>
<script>
let elem = document.querySelectorAll('#list1 > li');
let f = document.createElement('li');
f.textContent = 'Водка';
elem[2].parentNode.replaceChild(f , elem[2])
</script>
</body>
</html>
|
У вас какие-то новіе функции вижу, вместо innerHTML используете метод textContent, вместо getElementById используете querySelectorAll? Они работают одинаково?
Попробовал так, но вроде слышал это плохой тон, нужно выполнять поиск элементов в списке.
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
</head>
<body>
<ul id="list1">
<li>Кофе</li>
<li>Чай</li>
<li>Кола</li>
<li>Виски</li>
<li>Коньяк</li>
</ul>
<input type="button" onClick="freplace()" value="Замена элемента">
<script>
function freplace(){
let change = document.createElement('li');
change.innerHTML = 'Заменено';
list1.children[2].replaceWith(change);
}
</script>
</body>
</html>
|
Цитата:
https://learn.javascript.ru/modifying-document https://learn.javascript.ru/searching-elements-dom |
При вставке html есть метод insertAdjacentHTML
А как сделать так чтобы произошла замена элемента списка вставкой HTML и одновременно он стал элементом списка? Я пробую стилями но они не работают. Строка ul.city{list-style-type:circle;} не срабатывает
<!DOCTYPE html>
<html>
<head>
<title>Тест</title>
<meta charset="utf-8">
<style type='text/css'>
ul.city{list-style-type:circle;}
.city {color:brown; font-size:18pt;
margin:0; padding:0;
}
</style>
</head>
<body>
<ul id="list1">
<li>Кофе</li>
<li>Чай</li>
<li>Кола</li>
<li>Виски</li>
<li>Коньяк</li>
</ul>
<div id="div"></div>
<script>
let sos = document.querySelector('#list1 :nth-child(4)');
sos.insertAdjacentHTML('afterEnd','<p class="city">Привет</p>');
sos.remove();
</script>
</body>
</html>
|
denis_alekss,
строка 7 и 24 здесь, ищите разницу с вашим кодом.
<!DOCTYPE html>
<html>
<head>
<title>Тест</title>
<meta charset="utf-8">
<style type='text/css'>
ul .city{list-style-type:circle;}
.city {color:brown; font-size:18pt;
margin:0; padding:0;
}
</style>
</head>
<body>
<ul id="list1">
<li>Кофе</li>
<li>Чай</li>
<li>Кола</li>
<li>Виски</li>
<li>Коньяк</li>
</ul>
<div id="div"></div>
<script>
let sos = document.querySelector('#list1 :nth-child(4)');
sos.insertAdjacentHTML('afterEnd','<li class="city">Привет</li>');
sos.remove();
</script>
</body>
</html>
|
| Часовой пояс GMT +3, время: 15:41. |