We Keep Coding

Script is only showing one result how can I output all the results inside a p tag?

I have this script that gets all the attributes and its values and outputs them on the page. The problem I am having is it's currently working with document.write but I want to put the results inside a p tag. When I try to do that it only shows one attribute and its value. How can I output all the attributes and its values inside the targeted p tag?
My code
var foo = document.getElementById('foo'),
attrs = foo.attributes,
i = attrs.length,
attr;
while (i--)
{
attr = attrs[i];
document.write(attr.name + '="' + attr.value + '"');
/*document.querySelector('p').innerHTML= attr.name + '="' + attr.value + '"'; <-- This method only shows one attribute and its value :(*/
}
<div id="foo" class="bar baz" style="margin-left: 2px; height: 10px;"></div>
<p></p>

You should construct whole string and write to <p> once.
var content = [];
while (i--)
{
attr = attrs[i];
content.push(attr.name + '="' + attr.value + '"');
}
document.querySelector("p").innerHTML = content.join(" ")

You have to build a string inside the while loop and assign that string to innerHTML after the loop.

try to show html tags as text with innerHTML

I have a string that contains HTML tags.
I want to render as an HTML element only the span tags aka <span></span>.
every other tag that is not a span tag should be treated as regular text.
The result I'm trying to achieve is to color any text that I want even if it contains HTML tags.
I fail.
is there any other technique that I can try or a workaround?
var problem = ["<h1>","</h1>"];
var red_text = "<span style='color:red'>i am red </span>";
var green_text = "<span style='color:green'>" +
problem[0] +
"i am green" +
problem[1] +
"</span>";
//the real result should have <h1> </h1>
var expected_text = red_text + "<span style='color:green'>|h1|i am green|/h1|</span>";
document.getElementById("demo").innerHTML = red_text + green_text;
document.getElementById("expected").innerHTML = expected_text;
HTML and JavaScript code at :
https://jsfiddle.net/ytLftxww/1/

You need to use HTML entities to escape the < and > in those tags.
For example: "<span style='color:green'><h1>i am green</h1></span>"
See the fiddle: https://jsfiddle.net/ytLftxww/1/

var problem = ["<h1>","<h1>"];
does unescaping the < > work for you?
updated fiddle

You can use &lt for < and & &gt for >.

HTML is coming out as plaintext

I am trying to add some text to an element, however it is all coming out as plaintext, even when there is an HTML element included.
for (i = 0; i < restext.length; i++) {
var p = document.createElement("p");
p.innerHTML = "<p>" + restext[i].innerHTML + "</p>";
document.getElementById("registererrors").appendChild(p);
}
However with this, it prints out the tag:
The name <em class="placeholder">name</em is already taken.
How do I make it so that it processes this tag too?

Change
p.innerHTML = "<p>" + restext[i].innerHTML + "</p>";
to
p.innerHTML = restext[i].innerHTML;
The problem is that after you create p element with document.createElement you add <p></p> inside of it. And inside of the inner p tag you insert other HTML code, which automatically gets escaped.

javascript .replace width tag

Looking for help with a javascript reg ex replacement. What I need, is to replace all instances of
width="100">
With
style="width: 100px;"
But the actual px value is variable which is what is causing issues for me. I know reg expression is the way to go but I dont quite understand it.
This is a similar question but doesn't solve the issue for me:
JavaScript Regex Replace Width Attribute Matching
The reason this is a problem is because of the HTML generated by TinyMce...

Two options:
Using a regular expression
Parsing the HTML and working with the DOM (preferred)
Using a regular expression
The expression is fairly straightforward:
str = str.replace(/\bwidth="(\d+)"/g, 'style="width: $1px"');
The $1 in the replacement string is filled in with the content of the first capture group.
Example:
var str = '<div width="100">Stuff here</div><div width="240">More stuff here</div>';
display("Before: '" + str + "'");
str = str.replace(/\bwidth="(\d+)"/g, 'style="width: $1px"');
display("After: '" + str + "'");
function display(msg) {
document.body.insertAdjacentHTML(
"beforeend",
"<p>" +
String(msg)
.replace(/&/g, "&")
.replace(/</g, "<") +
"</p>"
);
}
But note that that will:
Replace width="nnn" everywhere in the string, even if not inside a start tag
End up adding a second style attribute to a tag that already has one
If that's okay, great; if not, you might want to parse the HTML, process the resulting parsed DOM nodes, and then serialize it again.
Parsing the HTML and working with the DOM
A better option is to parse the HTML and work with the DOM. You've said that the HTML will be for a div, so we don't have to worry about things like standalone table cells, etc.
Here's a simple parsing and updating example:
var str = '<div width="100">Stuff here</div><div width="240">More stuff here</div>';
var div = document.createElement('div');
div.innerHTML = str;
update(div.childNodes);
display("Before: '" + str + "'");
str = div.innerHTML;
display("After: '" + str + "'");
function update(nodes) {
Array.prototype.forEach.call(nodes, function(node) {
var width;
if (node.nodeType === 1) { // An element
width = node.getAttribute("width");
if (width) {
node.removeAttribute("width");
node.style.width = width + "px";
}
update(node.childNodes);
}
});
}
function display(msg) {
document.body.insertAdjacentHTML(
"beforeend",
"<p>" +
String(msg)
.replace(/&/g, "&")
.replace(/</g, "<") +
"</p>"
);
}

My first thought also was to work with the DOM instead of using RegEx. Instead of iterating over all the elements, we could just use querySelector, which supports attribute selectors.
var html = '<img src="//placehold.it/100x100" alt="" style="100px;">'+
'<img src="//placehold.it/120x120" alt="" width="120" style="border: 2px solid steelblue;">'+
'<img src="//placehold.it/140x140" alt="" width="140">',
wrap = document.createElement('div'),
nodes;
wrap.innerHTML = html;
nodes = wrap.querySelectorAll('[width]');
Array.prototype.forEach.call(nodes, function(el) {
var width = el.getAttribute('width');
if(width) {
el.removeAttribute('width');
el.style.width = width+'px';
}
});

edit (append?) a string stored in a jquery variable

I am bringing a big html string inside an ajax call that I want to modify before I use it on the page. I am wondering if it is possible to edit the string if i store it in a variable then use the newly edited string. In the success of the ajax call this is what I do :
$.each(data.arrangement, function() {
var strHere = "";
strHere = this.htmlContent;
//add new content into strHere here
var content = "<li id=" + this.id + ">" + strHere + "</li>";
htmlContent is the key for the chunk of html code I am storing in the string. It has no problem storing the string (I checked with an alert), but the issue is I need to target a div within the stored string called .widgteFooter, and then add some extra html into that (2 small divs). Is this possible with jquery?
Thanks

Convert the string into DOM elements:
domHere = $("<div>" + strHere + "</div>");
Then you can update this DOM with:
$(".widgetFooter", domHere).append("<div>...</div><div>...</div>");
Then do:
var content = "<li id=" + this.id + ">" + domHere.html() + "</li>";

An alternative way to #Barmar's would be:
var domHere = $('<div/>').html( strHere ).find('.widgetFooter')
.append('<div>....</div>');
Then finish with:
var content = '<li id="' + this.id + '">' + domHere.html() + '</li>';

You can manipulate the string, but in this case it's easier to create elements from it and then manipulate the elements:
var elements = $(this.htmlContent);
elements.find('.widgteFooter').append('<div>small</div><div>divs</div>');
Then put the elements in a list element instead of concatenating strings:
var item = $('<li>').attr('id', this.id).append(elements);
Now you can append the list element wherever you did previously append the string. (There is no point in turning into a string only to turn it into elements again.) Example:
$('#MyList').append(item);