За последние 24 часа нас посетили 20497 программистов и 1094 робота. Сейчас ищут 783 программиста ...

Как заменить узел в маркированном списке?

Тема в разделе "JavaScript и AJAX", создана пользователем denis_alekss, 9 дек 2020.

  1. denis_alekss

    denis_alekss Новичок

    С нами с:
    1 дек 2020
    Сообщения:
    8
    Симпатии:
    0
    Прочитал про узлы на сайте Javascript.ru


    Код (Javascript):
    1.  node.append(...nodes or strings) – добавляет узлы или строки в конец node,
    2.   node.prepend(...nodes or strings) – вставляет узлы или строки в начало node,
    3.   node.before(...nodes or strings)- вставляет узлы или строки до node,
    4.   node.after(...nodes or strings)- вставляет узлы или строки после node,
    5.   node.replaceWith(...nodes or strings)- заменяет node заданными узлами или строками.
    Нет примера как воспользоваться этим узлом node.replaceWithК примеру есть маркированный список,


    Код (Javascript):
    1.   <ul id="list1">
    2.   <li>Кофе</li>
    3.   <li>Чай</li></ul>
    4.   <li>Кола</li></ul>
    5.     <li>Виски</li></ul>
    6.     <li>Коньяк</li></ul>
    Как именно сделать замену элемента узла, а не вставку в конец или вначало. Например третий элемент Кола поменять на Водка?
     
    #1 denis_alekss, 9 дек 2020
    Последнее редактирование: 9 дек 2020
  2. Sail

    Sail Старожил

    С нами с:
    1 ноя 2016
    Сообщения:
    1.591
    Симпатии:
    360
    @denis_alekss, если оставить за рамками вопрос поиска нужного элемента, то примерно так:
    Код (Javascript):
    1.             let liReplacement = document.createElement('li');
    2.             liReplacement.innerHTML = 'replaced';
    3.             list1.children[2].replaceWith(liReplacement);
     
    denis_alekss нравится это.
  3. denis_alekss

    denis_alekss Новичок

    С нами с:
    1 дек 2020
    Сообщения:
    8
    Симпатии:
    0
    Переписал с кнопкой, спасибо Sail (в переводе с англ. Парус, хмм.. интересный ник).
    Код (Javascript):
    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4.     <title>Untitled</title>
    5.     <meta charset="utf-8">
    6. </head>
    7.  
    8. <body>
    9.  
    10. <ul id="list1">
    11.     <li>Кофе</li>
    12.     <li>Чай</li>
    13.     <li>Кола</li>
    14.     <li>Виски</li>
    15.     <li>Коньяк</li>
    16. </ul>
    17. <input type="button" onClick="freplace()" value="Замена элемента">
    18.  
    19. <script>
    20. function freplace(){
    21.            let change = document.createElement('li');
    22.             change.innerHTML = 'Заменено';
    23.             list1.children[2].replaceWith(change);
    24. }
    25.     </script>
    26. </body>
    27. </html>