Question

I’ve been struggling to find a jQuery alternative that does exactly the same as:

document.getElementById("element").firstChild.nodeValue = value;

Here’s the relevant html structure:

<div id="clock">
    <div id="day">
    </div>
    <div id="date">
    </div>
</div>

For “day” and “date” I can just use $("#day").text(day) and $("#date").text(date) but as soon as I use $("#clock").text(clock) for “clock”, the “day” and “date” disappear and only the “clock” element is shown.

Of course, “clock” is a parent element of the other two so maybe it ‘overrides’ the children elements if I use the jQuery code. Strangely, using pseudo elements like :first-child or :first doesn’t help.

Happy to hear a solution! Thanks.

Answer 1

It seems you want to insert some text before the #day element.

$("#clock").prepend('your text');

or

$("#day").before('your text');

should do it.

---

Note that .firstChild.nodeValue = value; only inserts new text before the element because you have a text node there, containing only white spaces. If your HTML was

<div id="clock"><div id="day"></div></div>

it wouldn’t do anything, because .firstChild would refer to #day and nodeValue is not defined for element nodes.