How to add icon in a cell before text - javascript

I want to add to the table cell a Font-Awesome icon. But I need to insert it before this cell text. How to do it via JavaScript or Jquery?
That's my code:
var song_nameL = tr.insertCell(0);
song_nameL.innerHTML = songName;
var fa_times = song_nameL.appendChild(document.createElement("i"));
fa_times.className = "fa fa-times";
As you see, it appears after the text. And if I put song_nameL.innerHTML = songName; to the end of this code, there will be no icon.
I tried to increase zIndex of icon, but it didn't help.

You have to prepend that <i> element,
var fa_times = song_nameL.insertAdjacentHTML('afterbegin',"<i class='fa fa-times'></i>"));
by using .insertAdjacentHTML("position", "htmlString");

The HTML code for the <i> element should be in front of / before the song name, so just do:
song_nameL.innerHTML = '<i class="fa fa-times"></i>' + song_nameL;

if you need the object you could use:
var fa_times = document.createElement("i");
fa_times.className = "fa fa-times";
song_nameL.insertBefore(fa_times, song_nameL.childNodes[0]);

Related

How to append a font awesome icon to container

I have a button that creates two input fields when someone clicks on the add button. I want to add a font awesome icon right next to the second input field. I tried adding it by using appendChild and innerHTML but that doesn't work at all I just don't get the icon rendered, how can I do it? Here is my code:
const mainParent = document.getElementById('main-parent');
const newPlatformNameInput1 = document.createElement("input");
newPlatformNameInput1.id = index + '_first';
newPlatformNameInput1.classList.add("form-control");
newPlatformNameInput1.classList.add("input");
const newPlatformNameInput2 = document.createElement("input");
newPlatformNameInput2.id = index + '_second';
newPlatformNameInput2.classList.add("form-control");
newPlatformNameInput2.classList.add("input");
const wrapperParent = document.createElement('div');
wrapperParent.id = index + '_parent';
wrapperParent.appendChild(newPlatformNameInput1);
wrapperParent.appendChild(newPlatformNameInput2);
mainParent.appendChild(wrapperParent);
mainParent.appendChild('<i class="fas fa-trash"></i>');
AppendChild expects a node to be passed not plain HTML.
icon = document.createElement("i");
icon.setAttribute("class","fas fa-trash");
mainParent.appendChild(icon);

find closing anchor tag from the string and add some value

I am trying to find closing anchor tag. And add Icon after the closing tag.The inside value is coming as a string from database.I need to extract the value and append with icon.
For example
<p>This is a paragraph and link testtestdsfasffdtest1fdfdfdfdfd</p>
In the above example I have paragraph tag inside I have two anchor tag.
Actually the result will come as Test added plus icon testdsfasffd & Test1 added plus icon 2 fdfdfdfdfd
First I need to find the closing anchor tag then i need to append the icon from other functions
Current I am trying like this
var string = '<p>This is a paragraph and link testtestdsfasffdtest1fdfdfdfdfd</p>';
I am setting an pattern
var closingAnchor = '</a>';
string.split(closingAnchor);
after this i need to append icon from other function using for loop. I am getting struggle here kindly please help me.
Splitting HTML is normally a bad bad idea. So just do it with the DOM.
var string = '<p>This is a paragraph and link testtestdsfasffdtest1fdfdfdfdfd</p>';
var div = document.createElement("div");
div.innerHTML = string;
var anchors = div.getElementsByTagName("a");
for (var i = 0; i < anchors.length; i++) {
var text = document.createTextNode(' TEXT TO ADD ');
var sibling = anchors[i].nextSibling;
if(sibling) {
anchors[i].parentNode.insertBefore(text, sibling);
} else {
anchors[i].parentNode.appendChild(text);
}
}
console.log(div.innerHTML);
document.getElementById("out").innerHTML = div.innerHTML;
<div id="out"></div>
Here you are: // for regex, <\/a> for </a>, g for search all
var string = '<p>This is a paragraph and link testtestdsfasffdtest1fdfdfdfdfd</p>';
var output = string.replace(/<\/a>/g, '</a>YOUR APPENDEE');
alert(output);
Hope this helps.

cleanest way to insert javascript code in html (inside javascript code)

I'm trying to build some HTML using jquery and then inject that html into some div on my page. I want to build an anchor element. The href, and the label of my anchor element come from javascript variables. I'm trying to do it like this:
$(function(){
var href = 'http://testing123.com';
var label = 'Anchor label';
var anchor_element = '' + label + '';
});
But this doesn't work. Any idea how I can properly construct my anchor element in javascript/jquery please.
You have to append the result to the DOM. add this line at the end.
$('body').append(anchor_element);
You can ofcourse replace 'body' with any other selector as you like.
$(function(){
var href = 'http://testing123.com';
var label = 'Anchor label';
var anchor_element = '' + label + '';
$('body').append(anchor_element); // add the element to <body>
});
working jsFiddle
Using jquery syntax:
$('<a/>', {
href: 'http://testing123.com',
text: 'Anchor label'
}).appendTo('body');
You can do this:
var href = 'http://testing123.com';
var label = 'Anchor label';
// Create a dynamic anchor element and set the href and label
var $anchor_element = $('<a/>', {
href: href,
text: label
});
// Append the newly created element to DOM,
// here we are appending it to the body
$('body').append($anchor_element);
FIDDLE DEMO
What ever you have write is working fine,But You forgot to append it to the target.
var href = 'http://testing123.com';
var label = 'Anchor label';
var anchor_element = '' + label + '';
$('#target').append(anchor_element);
Working Fiddle

How to change color with new tag in javascript?

In my HTML file I have to change color with new tag.It will be changed permanently.If it's possible to do.Now I am using below code:
function alertSelection()
{
var range = window.getSelection().getRangeAt(0),
content = range.extractContents(),
span = document.createElement('b');
span.appendChild(content);
var htmlContent = span.innerHTML;
range.insertNode(span);
}
when i press refresh i will be get old one.how to create tag when selecting.
Whenever you want to change some style through then use style
element.style.css attribue = value
Example: span.style.color = "green";

add html text with javascript

i am adding a input file tag and a link using a javascript function, works great. Now i want to add also a radio button and a text whit this radio... i can add the radio whit no problems, but the text... idk how.
here is the code...
addCampo = function () {
nDiv = document.createElement('div');
nDiv.className = 'archivo';
nDiv.id = 'file' + (++numero);
nCampo = document.createElement('input');
nCampo.name = 'archivos[]';
nCampo.type = 'file';
a = document.createElement('a');
a.name = nDiv.id;
a.href = '#';
a.onclick = elimCamp;
a.innerHTML = ' Eliminar';
portada = document.createElement('input');
portada.name = 'portada';
portada.type = 'radio';
portada.value = '1';
nDiv.appendChild(nCampo);
nDiv.appendChild(portada);
// HERE I WANT A SIMPLE TEXT SAYING WHATS DOES THE RADIO =)
nDiv.appendChild(a);
container = document.getElementById('adjuntos');
container.appendChild(nDiv);
}
this is working just fine! the only thing i dont know is how to add text whitout tags...
You need
text = document.createTextNode('what the radio does');
nDiv.appendChild(text);
Although it's better to use a label, because then you don't have to sharp-shoot the radio button. In that case you'd need:
portada.id = 'portada';
text = document.createElement('label');
text.innerText = 'what the radio does';
text.for = 'portada';
nDiv.appendChild(text);
Edit: as mentioned in the comments, innerText is not necessarily supported by all browsers, sorry! Just use innerHTML instead, use textContent if you don't care about old versions of IE, or create a text node and add it to the label node.

Categories