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>
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>)
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);
Related
I am trying to display/replace the HTML content inside a div according to a pressed pushpin in Bing Maps. I know I should be looking at JQuery .html() but I can't see how I can put a variable inside the HTML tags.
Example code:
function pushpinClickedCallback(e) {
if (e.target.metadata) {
var data = e.target.metadata.title; <-- how to make this include the JS variable and HTML tags
$('#infoPane').html(data);
}
// var e above is a pushpin in Bing Maps, infoPane is the div
Every time the callback is fired there is different data to be displayed. Should I even be looking at doing it this way? Or should I create a new div and destroy it each time (inefficient if pressing the same pushpin many times quickly)?
Your variable data will contain a string. Manipulate the string using JavaScript string functions to replace your title string and add whatever HTML tags you need. For example:
var data = e.target.metadata.title; // "Pushpin title"
var htmlString = "<div class=\"pin-text\">" + data + "</div>";
$("#infoPane").html(htmlString); // Replace infoPane element contents
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
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
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>';
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..