Я пытаюсь вставить текст после тега <img> с помощью javascript.Вставить текст после <img> тег
<div id="candy"><img src="candy.png" /> Insert text here!</div>
Если я использую document.getElementById('candy').innerHTML = "test";, изображение исчезает.
Вы можете мне помочь?
Это потому, что вы заменяете innerHTML текстом test. Вы не добавляете текст.
Try:
var div = document.getElementById('candy');
div.innerHTML = div.innerHTML + 'test';
Взятые из here.
Применяя это к разметке примера OP, результат будет «Вставить текст здесь! Test», поэтому он будет работать только один раз, и только если в div не будет никакого текста , – JJJ
Я предположил, что текст: «Вставить текст здесь!» Будет несуществующим, а затем JS вы знаете, вставьте туда текст :) – Charlie
Ну, тег img является частью HTML внутри div, и если вы заменяете HTML-файл div, вы также переписываете тег img.
Может быть, вы хотели что-то вроде этого: вместо
<div><img src="candy.png" /> <span id="candy">Insert text here!</span></div>
Есть ли что-то более «правильно», я имею в виду функцию типа 'lastChild'? –
Несомненно, 'var children = document.getElementById ('candy'). ChildNodes; var lastChild = children [children.length - 1]; 'но это не более« правильно », чем именованный диапазон. – JJJ
Это потому, что вы Javascript изменяет HTML внутри тега <img> для тестирования. Это не работает, так как <img /> является самозакрывающимся тегом.
Я считаю, что вы могли бы jQuery делать то, что вы пытаетесь, однако.
Использование
var div = document.getElementById('candy');
div.insertAdjacentHTML('beforeend', 'test');
Ссылка: https://developer.mozilla.org/en/docs/DOM/element.insertAdjacentHTML
http://api.jquery.com/appendTo/ –
Он не уточнил, что он хотел использовать JQuery. – Charlie
@Allendar OP не упоминается с использованием каких-либо фреймворков – Popnoodles