CODEWITHSUNDEEP
javascript
emma
emma

Reputation: 804

javascript | use JS to edit div text without changing other HTML in that div

I have a "leftnav" menu that allows the user to add filters to it from a menu (not shown). When the user adds a filter, leftnav gains another "row", or div with class="filters".

Each div.filters holds several divs. One of these is a "button", or div with classname "btn2", which holds a text operand, e.g. "=".

http://jsfiddle.net/bf8ugef7/6/

Initially div.btn2 text is set to "=". However, the user can hover on the "=" to see a ul li menu of operands. The jsfiddle shows just two options, "=" and ">". When the user clicks on, say, ">", div.btn2 text needs to update to show ">".

However I can't use btn2.parentNode.parentNode.innerHTML = ">" because this effectively deletes the ul li menu, which needs to remain.

So I need to update just the div text, without touching the ul li. Is this possible?

I've tried innerText and textContent but these don't work.

Thanks Emma

<div class="leftnav">
    <div class="images">
        <div class="toptext">Filters
            <div class="btn">+ filter</div>
        </div>
        <div id="container">
            <div class="filters rem" id="f12">
                <div class="btn4" id="b4f12">Pupil name</div>
                <div class="btn2" id="b2f12">
                    =
                    <ul>
                        <li id="ddf_12_0">=</li>
                        <li id="ddf_12_1">></li>
                    </ul>
                </div>
                <div class="btn1" id="b1f12">Joe Bloggs</div>
                <div class="btn3" id="if12">x</div>
            </div>
            <div class="filters rem" id="f13">
                <div class="btn4" id="b4f13">Pupil name</div>
                <div class="btn2" id="b2f13">
                    =
                    <ul>
                        <li id="ddf_13_0">=</li>
                        <li id="ddf_13_1">></li>
                    </ul>
                </div>
                <div class="btn1" id="b1f13">Bill Clinton</div>
                <div class="btn3" id="if13">x</div>
            </div>
        </div>
    </div>
</div>

Upvotes: 0

Views: 161

Answers (1)

yotamN
yotamN

Reputation: 771

You can first get the text of the div by document.getElementById('b2f13');.
than change the text with regex or string.replace to the chosen new text and change the text with the new text.

could be something like this:

var div = document.getElementById('b2f13').innerHTML;
var new_text = div.replace('=', 'TExt');
document.getElementById('b2f13').innerHTML = new_text;

Upvotes: 1

Related Questions