We Keep Coding

How do I use jQuery's insertBefore() function with a javascript string of HTML?

I am performing some DOM manipulation once my page loads and I was hoping to add some html right before an a specific div on the page. Not sure what I'm doing wrong here, I'm sure there's a simple way to accomplish this...
var finalStringHtml = '<div id="chartLinks">' + tableString + '</div>';
$(finalStringHtml.html().insertBefore("#chart_div")); //fails
$(toString(finalStringHtml).html().insertBefore("#chart_div")); //fails

You don't need the .html() call. (full docs: http://api.jquery.com/insertbefore/)
Try:
$(finalStringHtml).insertBefore("#chart_div");
If you want to, you can do the full code on one line and not create the variable:
$('<div id="chartLinks">' + tableString + '</div>').insertBefore("#chart_div");

How to handle input parameters while generating dynamic html from jquery function

I am using below function to generate dynamic HTML.
function (content) {
$('#divMessage').append('<span>'+ content+ '</span>');
}
Here I am appending content in div with id divMessage.
Here input parameter content can be any text passed to this function.
I am facing problem when I pass data containing html elements as it distorts html. I am not aable to paste it here as its get dostorted here in stack overflow editor as well.
How can I resolve this issue, TIA.
It should append what is being passed, don't want to convert html tags to html, if html tag with data is passed then html tag with data should be the ouput.

To resolve this you need to only paser the content text to HTML
Just do this
content= $.parseHTML(content);
$('#divMessage').append('<span>'+ content+ '</span>');
Hope it will help!

You can pass html value like this.
function AddContent(content) {
$('#divMessage').append('<span>'+ content+ '</span>');
}
$("#divAppendMessage").on("click", function() {
//$('#divMessage').html(''); // If you want to clear div before append
var html='';
html+='<h1>My new message</h1>';// You can add mark up like this.Be sure for closing tag.
AddContent('<h1>My new message</h1>');// Pass html without generate markup as OP say on comment.
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='divMessage'>
</div>
<button id='divAppendMessage'>Add Message</button>
May be
this fiddle solve your problem. Before get input from user convert it and reset it when bind.

'[object HTMLImageElement]' displaying instead of image

This is the code I tried to modify and put in a wrapper div. This works perfectly.
display_element.append($('<div>', {
html: trial.a_path_west,
id: 'jspsych-single-stim-stimulus-west'
}));
But this isn't working. In particular the div html part displays [object HTMLImageElement] instead of the actual image.
to_add+="<div id='jspsych-single-stim-stimulus-west'>" + trial.a_path_west + "</div>";
Thanks!

There is no html attribute for the div tag.
The html when used in the {} version will invoke the html jquery method on it.
To do it that way you will have to add the html between the opening and closing tags of the div
to_add+="<div id='jspsych-single-stim-stimulus-west'>" +trial.a_path_west+ "</div>";

Ok, I Think I understand what you're trying to do and what your problem is. When you're using "<div id='jspsych-single-stim-stimulus-west'>" + trial.a_path_west + "</div>" you're casting your image object as a string.
Instead use a jquery method such as html that will accept the image object as a parameter and generate the necessary html
if (!trial.west_is_html) {
to_add+="<img src="+trial.a_path_west+ " id='jspsych-single-stim-stimulus-west'>";
}
else {
var wrapper = $("<div id='jspsych-single-stim-stimulus-west'></div>");
wrapper.html(trial.a_path_west);
to_add+= wrapper.html();
}
See this demo from this answer for a working example and more information

jQuery: Best way to append to html of a paragraph inside a textarea

I have a textarea that contains variable html content which is always wrapped in a paragraph (p) tag.
HTML (before appending):
<textarea rows='7' class='form-control' id='comments'><p>My variable HTML content.</p></textarea>
I fetch this content using the following in jQuery:
jQuery:
$('#comments').val();
Now I need to append HTML at the end of this paragraph but inside the p tag.
HTML (after appending):
<textarea rows='7' class='form-control' id='comments'><p>My variable HTML content. Some appended HTML.</p></textarea>
I can of course replace the last 4 characters of the above (which is the closing p tag), then append my HTML and then add the closing p tag again.
Can someone tell me if there is a better way to achieve the same in jQuery ?
Many thanks in advance for this, Tim.

Parse the string value of the textarea as HTML, and insert whatever you like, then pass the string value of the HTML back
$('#comments').val(function(_, val) {
return $('<div />', {html:val}).find('p').append('content').end().html();
});
FIDDLE

This could do the trick
var html = $('#comments').val();
$('#comments').val(
$(html).append(' Some appended HTML.')[0].outerHTML
);
DEMO

You could insert the value into a temporary div, add an element to the <p>-element inside the temporary div and fetch the renewed content again:
var tmpDiv = $('<div></div>'); //create temporary element
tmpDiv.html($('#comments').val()); // add HTML from textarea
$(someHtml).appendTo($('p', tmpDiv)); // append custom HTML to P inside temp element
newTextAreaValue = tmpDiv.html(); // retrieve new value

Ok. I REALLY love this!
$('#comments').text($($('#comments').text()).append(' a new insert!').text());
Don't look at it too long. Could hurt your eyes :-)

Passing html data from a div to php

I am able to get the total text data from a contentEditable div, but I would like to pass the data just as it is in the div with the HTML elements in tact to a PHP file. At the moment only the text is being returned by log stripped of html tags,
First I dynamically add this to the div
var user = "<a contenteditable='false' href='#' >"+name+" </a>";
$("#message").append(user);
But when I try to log the content I only see the text within the 'a' tag returned
var msg = $('#message').html();
console.log(msg);
THi is my HTML
<div name="message" contentEditable="true" id="message" ></div>
So an Example of what I would like to pass is this
"Hello world!<a href='#'>Ned</a> Fails!"
Any help is appreciated, thanks.

See here for a working copy to what I think your looking for. Looks like you just need to ensure the id's of your elements match:
$(function () {
var name = "Ned";
var user = "<a contenteditable='false' href='#' >"+name+" </a>";
$("#message").append("Hello world!" + user + " Fails!");
var msg = $('#message').html();
alert(msg);
})

The $.html() function returns code of child elements.
It does not return the HTML code of the element itself.
Use $("#message").parent().html() to access element's parent.

you are appending your data in element with id -"message"...
$("#message").append(user);
but taling html of element with id -"chat-message"
$('#chat-message').html();
so where is your chat-message element?? might be you are making mistake in choosing the element to display html..