How to append anchor element to div? - javascript

I work on my angularjs project.
I have this string in my controller:
"Open In Waze"
And I have this div in my template:
<div id="wazeArea" ng-init="editor.appandWazeLink(editor.siteId)"><i class="fa fa-car" aria-hidden="true"></div>
How can append anchor element above to div to make it clickable?

This frustrated me a few times as well. You should be able to just embed the string name into it like this:
var htmlStringFromController = "Open In Waze";
And then call it from there.
<div id="wazeArea" ng-init="editor.appandWazeLink(editor.siteId)">{{htmlStringFromController}}</div>
The problem here is that angular doesn't want to inject raw HTML, right? So you can use $sce to accomplish that (AngularJS : Insert HTML into view)
But the question is, could you just inject the URL into an anchor tag that already exists in the div? Like this:
// controller code:
var URLFromController = "http://waze.to/?navigate=yes&ll=72.0274, 564.7814";
And then use this in the view, only displaying it if URLFromController is truthy.
<div id="wazeArea" ng-init="editor.appandWazeLink(editor.siteId)">
<a ng-if="URLFromController" href="{{URLFromController}}" target="_blank">Open in Waze</a>
</div>

// 1. get the parent of the div
// 2. append the anchor to it
$("#wazeArea").parent().append($(string));
// 3. move the div inside of the anchor by appending it
$("#id_of_a").append($("wazeArea"));

document.getElementById("wazeArea").appendChild(Anchor element in single quotes ' ');
You can use single quotes while making html string. It can allow double quotes inside that without need of escape characters

Related

How do I wrap text within a link tag using JavaScript/Jquery?

Here is my current code:
<a class="mg_label_7" href="/" shape="">Hello</a>
I want to have:
<a class="mg_label_7" href="/" shape=""><div id="hello">Hello</div></a>
So I can manipulate the background of the link text without changing the rest of the link areas text. Is there anyway to pinpoint this piece of text and insert a div or even a span using JavaScript/jQuery?
I've been trying to do this for around 3 hours, the closest I've got to achieving it is using
var elem = document.getElementsByTagName('a')[0];
var html = elem.innerHTML;
elem.innerHTML = '<div class="red">'+ html + '</div>'
which successfully targeted a link in my code and changed it to the span, but if I try to getElementsByTagName then getElementByClassName and use mg_label_7 it won't work. There are duplicates of the tag in the code and I want to target all of them.
I'm trying to manipulate a SharePoint web part so I'm not sure if it's stopping it from being edited.
You can use .wrapInner()
$('.mg_label_7').wrapInner('<div id="hello"></div>')

How to replace specific elements in a textarea with jQuery?

I have a textarea, where I'm displaying HTML data coming from my Database. Within that data there are several links. Some of them has a class some of them don't.
Sample html code:
<textarea class="txt-area">This contents. a <span>test</span> document. Please <a class="my-class" href="http://facebook.com/">do</a>. ignore it's <a class="my-class" href="http://google.com/">contents</a>.</textarea>
My question is, that how is it possible to search for those anchor tags (whithin the textarea) which has the specific class added and replace their HREF attribute?
Just parse the HTML with jQuery and play with it. You can then update the value after :
var $textarea = $('.txt-area');
var $html = $('<div>').html($textarea.val());
$html.find('.my-class').attr('href', 'newHREF');
$textarea.val($html.html());
Fiddle : http://jsfiddle.net/5VvfH/
First get value of text-area and then replace that class values
var htmlData = $('<div>').html($(".txt-area").val());
$(htmlData).find("a.ReqClass").each(function(){
alert($(this).attr("href"));
// and if you want to replace it then
$(this).attr("href","newHref");
});

How to insert text and html within a tag where the text appears first and html appears second

I have been looking on the internet, but I failed to find the correct solution.
What I have here erases the text content with the html, and I need both there.
On the markup I need something like this:
<h1 class="stock-count">54<span class="stock-count-info">In Stock</span></h1>
But I keep getting something this (without 54):
<h1 class="stock-count"><span class="stock-count-info">In Stock</span></h1>
This is the jQuery code I have tried:
$(".stock-count").text(count);
$(".stock-count").html("<span class='stock-count-info'></span>");
$(".stock-count-info").text("In Stock");
Has anyone got any suggestions?
PS. The span tag HAS to be within the h1 tag.
Try this : You can add count and stock-count-info span directly to html of stock-count span in a single call.
$(".stock-count").html(count+"<span class='stock-count-info'>In Stock</span>");
You can use .append():
$(".stock-count").append("<span class='stock-count-info'>In Stock</span>");
use prepend to insert the element before
$(".stock-count").html("<span class='stock-count-info'></span>").prepend(count);

Div String replacement using RegEx

Hi I am using the following code :
breakContent = breakContent.replace(/<div>/g, ' <div>');
Here breakContent is a string that contains html code. I need to provide space before div tag.The above code works fine for div without any attribute like id, style,etc...
So what I need is the working code including attributes in div tag...
I tried the below code..but it does not give space before div and instead it replace the div with space
breakContent = breakContent.replace(/<div\s*[\/]?>/gi, " ");
Just change it to:
breakContent = breakContent.replace(/<div/g, ' <div');
Removing the trailing > will allow for <div> tags with attributes.
EDIT: Of course, this could pick up text that isn't actually a <div> tag, if you have text matching <div that isn't a tag.

How to append html to first occurance of string after selected element

I have html like so:
<div class=foo>
(<a href=forum.example.com>forum</a>)
<p>
Some html here....
</div>
And I want to insert another link after the first one, like so:
<div class=foo>
(<a href=forum.example.com>forum</a>) <a href=blog.example.com>blog</a>
<p>
Some html here....
</div>
...but because it is enclosed in () I cannot use:
$('div.foo a:first').append(' <a href=blog.example.com>blog</a>');
...which would place it before the ).
So how can I extend my jQuery selection to select the literal ) or do I need to use another solution?
You can either match and replace the whole (<a />) string, or place another element (such as a span) around the whole thing.
<span>(<a href=forum.example.com>forum</a>)</span>
Append is also inserting the new anchor tag inside the existing anchor. You'll probably find you're looking for after()
Could you possibly select the next <p> tag and prepend (actually...use the before method) the link?
$('div.foo a:first').next('<p>').before(' <a href=blog.example.com>blog</a>');
One should never modify XML/HTML (especially untrusted/illformatted) by regular expressions, but if you are really desperate:
var container = $('div.foo');
var append = '...';
var html = container.html();
var replaced = html.replace(/\(<a [^\)]+\)/, "$& " + append);
container.html(replaced);
Note that the above will fail if you have ")" character inside a-tag.

Categories

Resources