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, время: 13:05. |