Appending to a div in JQuery - javascript

At first imgButton is a string of text containing HTML for an img tag. However, this variable is later turned into the results of .detach() of the img tag. The problem in the below code is that it does not display the image that it did previously, but instead [object Object] is displayed. It does display the correct image when using imgButton inside of its own append statement or appendTo. Is there a way to print out imgButton in the same append statement as the other strings and have it display properly?
I hope I explained the problem properly.
$("#search_prams").append("<div class='advsearchparam'><select class='searchparam'>" +
"<option value='test'>test</option>" +
"<option value='test1'>test1</option>" +
"</select><input class='search' type='text'><button class='remove' id='remove1'>X</button></div>"+ imgButton);

If it says that imgButton is an object then it is not a string try this,
$("#search_prams").append("your div string here ")
.append(imgButton);// append img button here

Related

javascript display htmlentities tag

var foo = $('.imgEscape').text();
foo = foo.replace("<img src="", "<img src='");
foo = foo.replace("" />", "' />");
$('.imgEscape').text(foo);//will display as string
$('.imgEscape').html(foo);//will display all html tag
<img src="https://www.google.com.tw/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" />
<b>abc</b&gt
I have a page backend output data as htmlspecialcharacter.
I wish to use js to replace some tag (ex. img tag)
so I can still display image
my problem is if I use html(), it will display all element.
I wish to display image only (<img> ... <b>abc</b&gt)
anyone know how to do this?
The text() method returns the parsed text data so String#replace method is doing nothing since the content is parsed string. Instead you need to get the actual HTML content content using html() method .
var foo = $('.imgEscape').html();
// update here -----------^^^^^^----
foo = foo.replace("<img src="", "<img src='");
foo = foo.replace("" />", "' />");
$('.imgEscape').html(foo);

'[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 :-)

JQuery: wrapping variable's contents

I have a variable that contains a bunch of HTML that I retrieve from a HTML5 SQL database.
I can .append() this to an element in the DOM and it appears fine. But I want to .wrap() the HTML contents first, thus I have written:
content = $(content).wrap(function() {
return '<div class="event_holder" />';
});
$('#mydiv').append(content);
However, I get the error
Syntax error, unrecognized expression: ~HTML contents of variable~
I have also tried:
content = $(content).wrap('<div class="event_holder" />');
Would anyone know whats going on here and how I can correctly wrap this?
EDIT: the contents of 'content' is:
<input id="e1coords" class="coords" name="e1coords" type="hidden" value="-27.482359,153.024725">
The problem could be content = $(content).wrap('<div class="event_holder" />'); still returns the inner content not the wrapped element, you need to append the parent of the content.
Try
content = $(content).wrap('<div class="event_holder" />').parent();
Demo: Fiddle
i don't know why are you using callback of wrap() when you can do it directly
content = $(content).wrap('<div class="event_holder" />');
and it will be better if you can show us what actually the content contents..
updated
try this
content = $('#e1coords').wrap('<div class="event_holder" />');
OR
var content = $('#e1coords');
content = content.wrap('<div class="event_holder" />');
I found out the because the content variable was actually retrieved from a (html5) database it was not part of the DOM, thus JQuery was having issues with it.
I did the wrap manually and it worked
content = '<div class="event_holder">' + content + '</div>';

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..

Categories