Need to show output as HTML

[qwikad.com]

I have this script and I'd really like to show the results as an HTML output. Not sure how to do this myself. I know it can be done with innerHTML. Or maybe there's a better way. Hope you can help. As long as the script can read tags. Thanks!!


(function(d) {

function nodeFlush(e) {
while (e.firstChild) e.removeChild(e.firstChild);
}

function nodeAdd(e, node) {
e.appendChild(typeof node == 'object' ? node : d.createTextNode(node));
}

function nodeReplace(e, node) {
nodeFlush(e);
nodeAdd(e, node);
}

function eventAdd(e, eventName, handler) {
if (e.addEventListener) e.addEventListener(eventName, handler, false);
else e.attachEvent('on' + eventName, handler);
}

var
target = d.getElementById('selections'),
output = d.getElementById('selectionsResults'),
inputs = target.getElementsByTagName('input');

function checkInputs() {
var result = [];
for (var i = 0; i < inputs.length; i++) {
if (inputs[i].checked) result.push(inputs[i].value);
}
nodeReplace(output, result.length ? result.join('<br>') : '0');

}

for (var i = 0; i < inputs.length; i++) {
eventAdd(inputs[i], 'change', checkInputs);
eventAdd(inputs[i], 'click', checkInputs);
}

checkInputs();

})(document);


This is the script if you want to see what it currently does: http://jsfiddle.net/T5Pm7/180/

[Beverleyh]

I'd really like to show the results as an HTML outputIts doing that already - the checked checkbox values are being added to the DOM inside <span id="selectionsResults"></span>


As long as the script can read tags.What do you mean by this?

Additionally, it might help if you show what you want the resulting HTML output to be.

[qwikad.com]

Sorry if I wasn't clear. I want it to convert tags as if it's an HTML page. Currently, it show tags like <b>a</b>. It should show b. (HTML markup that is). Hope this clarifies.

This is the script if you want to see what it currently does: http://jsfiddle.net/T5Pm7/180/

[molendijk]

Sorry if I wasn't clear. I want it to convert tags as if it's an HTML page. Currently, it show tags like <b>a</b>. It should show b. (HTML markup that is). Hope this clarifies.
This does what you want:

<form method="get">
<div id="selections">
<input type="checkbox" value="<b>a</b>">First<br>
<input type="checkbox" value="<i>b</i>">Second<br>
<input type="checkbox" value="<span style='font-family: verdana; font-size: 16px; color: red'>c</span>">Third<br>
<input type="checkbox" value="<u>d</u>">Forth<br><br>
<div>You Selected: <span id="selectionsResults"></span></div>
</div>
</form>

<script>
(function(d) {

function nodeFlush(e) {
while (e.firstChild) e.removeChild(e.firstChild);
}

function nodeAdd(e, node) {
e.appendChild(typeof node == 'object' ? node : d.createTextNode(node));
}

function nodeReplace(e, node) {
nodeFlush(e);
nodeAdd(e, node);
}

function eventAdd(e, eventName, handler) {
if (e.addEventListener) e.addEventListener(eventName, handler, false);
else e.attachEvent('on' + eventName, handler);
}

var
target = d.getElementById('selections'),
output = d.getElementById('selectionsResults'),
inputs = target.getElementsByTagName('input');

function checkInputs() {
var result = [];
for (var i = 0; i < inputs.length; i++) {
if (inputs[i].checked) result.push(inputs[i].value);
}
nodeReplace(output, result.length ? result.join(', ') : 'nothing');
document.getElementById('selectionsResults').innerHTML=document.getElementById('selectionsResults').textContent;

}

for (var i = 0; i < inputs.length; i++) {
eventAdd(inputs[i], 'change', checkInputs);
eventAdd(inputs[i], 'click', checkInputs);

}

checkInputs();

})(document);
</script>

[qwikad.com]

Again, very much appreciated. Not the first time you have helped me.