Как создать кликабельный промежуток между текстом в div с помощью Javascript

Question

Существует html div с текстом внутри.Я хочу изменить содержимое div с помощью дополнительного текста, но с интервалом текста (B) между существующим текстом (A) и тем, что я вставляю (C).В span также есть стиль css, реализованный с помощью id, но удаленный из фрагмента кода, так как он не имеет прямого значения.

Если бы span был в самом конце, я мог бы просто добавить его как потомок,который поместил бы это в конец текста div.Тем не менее, любой текст, который я позже добавлю в div, все равно будет находиться перед интервалом.Промежуток всегда будет в конце, по крайней мере, насколько я знаю.

Допустим, существующий div говорит «Hello World». Я хочу использовать Javascript, чтобы добавить следующее:

var targetDiv = div;
div.textContent = 'Hello World! ';
var spanText = div.appendChild(document.createElement('span'));
spanText.innerHTML = 'Click Me!';
spanText.onclick = function(){
  perform task here;
};
div.textContent += ' Did you click it?';

В div не показывалось бы "Hello World. Click Me! Вы щелкнули по нему?"Было бы показано «Hello World. Вы щелкнули по нему? Click Me!»

Я пытался сделать интервал внутри div, используя innerHTML, при добавлении текста, например, так:

var targetDiv = div;
div.textContent = 'Hello World! ';
targetDiv.innerHTML += '<span>Click Me!</span> Did you click it?';
var spanText = div.span; //and variations such as div.children(1);
spanText.onclick = function(){
  perform task here;
};

Проблема здесь в том, что я предполагаю, что, поскольку он находится во innerHTML, javascript не распознает / не находит диапазон, поэтому ему нельзя присвоить имя переменной.Или назначить клики и прочее.Здесь текст отображается правильно, как «Hello World. Click Me! Вы щелкнули по нему?», Но onclick не работает.Поэтому я попытался поместить функцию onclick (да, однострочную) внутри innerHTML, как показано ниже:

var targetDiv = div;
div.textContent = 'Hello World! ';
targetDiv.innerHTML += '<span onclick = "perform task here;">Click Me!</span> Did you click it?';

Это тоже не сработало.В отличие от первой и похожей на вторую попытку, текст отображается правильно, но функция не работает.

Что касается того, почему я делаю такое бессмысленное упражнение, это просто абстрактный пример того, над чем я работаюи я чувствовал, что загрузка действительного кода в этом случае приведет только к его ненужному контексту.Однако я готов предоставить любые разъяснения, если они необходимы.

Ваниль JS, пожалуйста.В данный момент у меня нет проекта JQuery, и его вставка для такого незначительного кода кажется излишним.

Помощь будет высоко ценится, спасибо!

Answer 1

Хорошие новости!Для этого уже есть метод JavaScript.Некоторые из них на самом деле.

element.insertAdjacentHTML и element.insertAdjacentText - это методы, которые позволяют вам позиционировать text и html до, после и какпервый или последний дочерний элемент указанного элемента.

Первый параметр принимает значение позиции.Это может быть любой из следующих:

'beforebegin': Before the element itself.
'afterbegin': Just inside the element, before its first child.
'beforeend': Just inside the element, after its last child.
'afterend': After the element itself.

Второй параметр - это либо text, либо HTML, который вы хотите вставить в указанную позицию.

В качестве примера того, как это будет выглядеть в целом:

 let element = document.querySelector("div"); //get a div element!

 element.insertAdjacentText("beforeend",
"this text node is the last child of the div");

 element.insertAdjacentHTML("beforeend", 
"<span>Just kidding, This span tag is now the last child of the div! </span>");

 element.insertAdjacentText("beforebegin", 
 "This text is inserted directly before the div!");

 element.insertAdjacentHTML("afterbegin", 
 "<span> This span tag is now the first child of the div!</span>");

 element.insertAdjacentText("afterend",
"This text is entered directly after the closing div tag!");

В вашем случае использования (хотя я согласен с TJ Crowder в том, что лучше всего вставить тег span, создавузел и добавление его вместо использования innerHTML - , поскольку он имеет лучшую производительность и обеспечивает большую ясность , я оставлю это на ваше усмотрение), следующий пример даст вам представление о том, как применитьэти методы для вашего кода:

let div = document.querySelector("div");
div.innerHTML = "<span> click me </span>";
let span = div.querySelector("span");

span.addEventListener("click", function() {
alert("clicked span");
});


span.insertAdjacentText("beforebegin", " ::this is before the span tag::");
span.insertAdjacentText("afterend", " ::this is after the span tag:: ");

/*
'beforebegin': Before the element itself.
'afterbegin': Just inside the element, before its first child.
'beforeend': Just inside the element, after its last child.
'afterend': After the element itself.
*/

span {
color: red;
cursor: pointer;
}

div {
color: blue;
}

<div><span></span></div>

Answer 2

Вместо использования textContent используйте createTextNode и appendChild, см. *** строк:

var targetDiv = div;
div.appendChild(document.createTextNode('Hello World! '));      // ***
var spanText = div.appendChild(document.createElement('span'));
spanText.innerHTML = 'Click Me!'; // Could use `createTextNode` here as well...
spanText.onclick = function(){
  // perform task here;
};
div.appendChild(document.createTextNode(' Did you click it?')); // ***

Live Пример:

var div = document.createElement("div");

div.appendChild(document.createTextNode('Hello World! '));
var spanText = div.appendChild(document.createElement('span'));
spanText.innerHTML = 'Click Me!'; // Could use `createTextNode` here as well...
spanText.onclick = function(){
  console.log("Clicked!");
};
div.appendChild(document.createTextNode(' Did you click it?'));

document.body.appendChild(div);

Конечно, другой подход заключается в использовании innerHTML и последующем получении диапазона:

div.innerHTML = "Hello World! <span>Click Me!</span> Did you click it?";
div.querySelector("span").onclick = function(){
  console.log("Clicked!");
};

Live Пример:

var div = document.createElement("div");

div.innerHTML = "Hello World! <span>Click Me!</span> Did you click it?";
div.querySelector("span").onclick = function(){
  console.log("Clicked!");
};

document.body.appendChild(div);