appendChild,removeChild
Помогите, пожалуйста, разобраться
Хотелось бы сделать чтобы при нажатие на 1 добавился и при повторном нажатии удалялся узел <div class="one">Текст1</div> А если сразу после после нажатия на 1 кликнуть по 2 то добавить второй узел <div class="one">Текст2</div>, а первый узел удалить В теге div меняется только текст <span class="name">1</span> <span class="name">2</span> Буду очень благодарен! |
Андрей812,
есть 400 вариантов поиск - форум - открывашка |
Спасибо, но по поиску открывашка нет решения моей проблемы.
Напишу подругому - есть код, в котором при нажатии на span отображается div (ему присваивается display:block) Помогите, пожалуйста, чтобы при нажатии на span добавлялся узел div. Т.е чтобы ДО клика в теге span div не было <span class="helptip" onclick="helptip(this)"> <div class="help_content">Текст<div class="jclose"></div></div> </span> function helptip(t) { helptip.v = 0; var b = t.children[(t.children.length-1)]; if (b.style.display=="block") helptipx(); else { helptipx(); b.style.display = "block"; helptip.v = 1; } } function helptipx() { if (helptip.v==1) { helptip.v = 0; return; } var s = document.querySelectorAll(".helptip"); for (var i=0; i < s.length; i++) { s[i].children[(s[i].children.length-1)].style.display = "none"; } } |
Андрей812,
что не так в данных примерах https://javascript.ru/forum/dom-wind...tml#post494186 https://javascript.ru/forum/css-html...tml#post494297 Цитата:
|
В примерах которые вы указали, div присутствует в html верстке и при клике меняется только css стиль. А я хочу чтобы div при клике на span добавлялся (append). Т.е при загрузке странице был только
<span class="helptip" onclick="helptip(this)"></span> а при клике на span был уже <span class="helptip" onclick="helptip(this)"> <div class="help_content">Текст<div class="jclose"></div></div> </span> |
зависимые клики
Андрей812,
<!DOCTYPE html> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style type="text/css"> .helptip { height: 35px; background-color: hsl(328, 100%, 54%); width: 200px; display: block; margin: 4px; } </style> <script> document.addEventListener("click", ({target}) => { if (target.closest(".helptip")) { const html = `<div class="help_content">Текст<div class="jclose"></div></div>`, content = target.querySelector(".help_content"), otherСontent = document.querySelector(".helptip .help_content"); if(otherСontent && otherСontent != content) otherСontent.remove(); content ? content.remove() : target.insertAdjacentHTML("beforeEnd", html); } }) </script> </head> <body> <span class="helptip"></span> <span class="helptip"></span> </body> </html> |
СПАСИБО ОГРОМНОЕ!!
|
зависимые клики, Custom Elements
Андрей812,
<!DOCTYPE html> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style type="text/css"> .helptip { height: 35px; background-color: hsl(328, 100%, 54%); width: 200px; display: block; margin: 4px; } </style> <script> const cssText = `<style type="text/css"> .help_content { text-align: center; line-height: 35px; position: relative; } .jclose:after{font-size: 32px; padding: 4px; line-height: 8px; height: 8px; right: 2px; top: -16px; position: absolute; content: "\u0353"; color: hsl(0, 0%, 100%); } </style>`, htmlText = `<div class="help_content">Текст<div class="jclose"></div></div>`; class Attention extends HTMLDivElement { constructor(html, cls) { super(); this.parentClass = cls; this.attachShadow({mode: 'open'}); this.shadowRoot.innerHTML = html; document.addEventListener("click", this.eventHandler.bind(this)); } eventHandler({target}) { if(target = target.closest(this.parentClass)) { target === this.parentNode ? this.remove() : target.append(this); } } } window.customElements.define('help-element', Attention,{extends: 'div'}); new Attention(cssText + htmlText, `.helptip`); </script> </head> <body> <span class="helptip"></span> <span class="helptip"></span> </body> </html> |
Часовой пояс GMT +3, время: 00:02. |