Форум

denis_alekss · #1 (**permalink**) 09.12.2020, 16:00

Прочитал про узлы на сайте 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>

Как именно сделать замену элемента узла, а не вставку в конец или вначало. Например третий элемент Кола поменять на Водка?

рони · #2 (**permalink**) 09.12.2020, 16:15

denis_alekss,
чем вставка не угодила? вставили новое, удалили старое или переписали parent.replaceChild(newElem, node)

denis_alekss · #3 (**permalink**) 09.12.2020, 16:19

<!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>

Что-то не заменяется

рони · #4 (**permalink**) 09.12.2020, 16:24

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>

рони · #5 (**permalink**) 09.12.2020, 16:26

Сообщение от denis_alekss

parent.replaceChild("Водка",elem[2])

"Водка" -- нужен элемент а не строка!

рони · #6 (**permalink**) 09.12.2020, 16:30

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>

denis_alekss · #7 (**permalink**) 10.12.2020, 13:18

У вас какие-то новіе функции вижу, вместо 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>

рони · #8 (**permalink**) 10.12.2020, 13:47

Сообщение от denis_alekss

Они работают одинаково?

а почитать?
https://learn.javascript.ru/modifying-document
https://learn.javascript.ru/searching-elements-dom

denis_alekss · #9 (**permalink**) 14.12.2020, 19:46

При вставке 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>

рони · #10 (**permalink**) 14.12.2020, 19:53

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>

Форум

Справочник

Discord чат

Курсы javascript