I'm not experienced with JS, so please excuse the presumably very beginner question.
I have this line:
$el.text(type + "|");
I need to wrap the "|" in span tags such as '<span class="">|</span>' though when I do so it simply prints out the tags as text as opposed to embedding them as HTML wraps.
How do I go about doing this?
Use .html() to print out HTML content, text prints out plain text.
$el.html(type + "<span class=''>|</span>");
or
$el.html(type).append($('<span/>',{text : '|'}));
You can dynamically create your span element using this syntax:
var $el = $('<span>').html('|');
This fiddle contains my solution. The fiddle uses a button to make it clear what is actually happening. I also added a style to the span so you can see it being added.
https://jsfiddle.net/g0n71se7/
$("#test").append("<span> | <span>");
By using the jQuery append you will insert content to the end of an element. You could alternatively use prepend to insert at the start of an element.
Related
I'm writing a user script in Greasemonkey and I am currently adding elements to a text box. I have tried unsuccessfully to use inline CSS within the created element like so
CSS
.append($("<p style="color:blue">"))
Is this even possible to do with jQuery? I couldn't find any examples of this searching around and I'm still really new to coding, so I apologize if this has been answered before.
Supposing you want to append a inline-styled <p> tag to a <div> tag you have to use:
var parentNode = $('div');
var childNode = $('<p>');
childNode.css('color', 'blue');
parentNode.append(node);
The last post asking really well to question but your first approach works also (you just forget the '/' at the end).
Supposing you want just adding a simple "p" empty element, you can just do this (with Jquery):
$(element).append('<p style="color:red" />')
or if you want to add a p no empty element do this :
$(element).append('<p style="color:red" > My text </p>')
It's the shortest way to do that but the last post show a more cleaning technic to do that.
I need to convert snippets of text that contain html tags into plain text using Javascript / Node.Js.
I currently use String.Js library for that, but the problem is that when it removes the tags (using strip_tags() functions), it also removes the new line.
E.g.
<div>Some text</div><div>another text</div>
becomes
Some textanother text
Do you know how I could get rid of this problem? Maybe another library?
Thanks!
Try using Cheerio. It will expose a jQuery like interface for you on the server side. Then it's just:
var html = $(htmlstring).html();
Then just traverse the DOM for whatever elements you want and call $(element).text();
Hi this is very simple solution of your problem because I'm using reg exp and you can do what you want.
In this case we remove all tags except br tags.If you want you can remove br tag and add another tag maybe \n \t or what you want.
I hope this can help you.
Chears!!!
var html = "<div>Some text</div><div>another text</div><br />test<div>10</div>";
var removeHtmlTags = html.replace(/(<([^>!br]+)>)/ig,"");
console.log(removeHtmlTags);
I have for example such piece of html:
var html = '<p>Title</p><b>edit me</b><i>remove me</i>';
I want to change title in it, but do not want to use regexp or string replace
functions for this, because if title would match tag name, then html could be corrupted.
I now trying to adopt jQuery for this, because it seems capable, but in reality things not so easy. Here is code:
$( $(html)[0] ).text('New title');
console.log(html); // --> prints out original html with old title
Any idea how to make this code work if it is at all possible ?
html = $('<div/>').html(html).find('p').text('New title').end().html();
http://jsfiddle.net/bEUHN/
Note: There are 3 wrapper elements in the created jQuery object using $(html), for selecting the p element you should use filter method.
$(html).filter('p').text('New title');
I wanto to insert a space at the start of my string
Example:
MySite
MySite (I want this)
I have tried in this mode but nothing
txt=" "+v.text();
Can someone help me? Thanks a lot
Try :
txt=" "+v.text();
The other good solution would be to use div with some style set on it.
<div style='margin-left:15px' id='main_text'></div>
You could use jQuery to place txt in the div.
txt= v.text();
$('#main_text').html(txt);
A solution is to fill the spaces with entities, but if you have to achieve this effect just for styling/visualization purpose, then wrap that line in a proper tag and use some CSS instead (e.g. text-indent property)
if you have to indent text inside a select (as I guess reading your previous answer) you may want to wrap your options inside an optgroup element (and give it some padding)
var str2 = " Here goes your string with spaces";
There are 2 solutions below :-
1. txt="<pre> </pre>"+v.text();
2. txt="<span style='margin-left:15px'></span>"+v.text();
Is there a way to remove the HTML blockquote tag, but keep the text? Basically, if in my code was <blockquote>Hello!</blockquote>, I'd want it to display as Hello! - I don't know if there's a way to filter the blockquotes out or just clone the text, but an answer would be quite helpful!
Use contents with unwrap:
$("blockquote").contents().unwrap();
You can use .html() to achieve this
$("blockquote").html()
Check out this running example