Develop Reference

How to assign HTML text to a JavaScript variable?

Is it possible to assign HTML text within an element to a JavaScript variable? After much Googling, I note that you can assign HTML elements to a variable, but I want the actual text itself.
Details about my goal:
I am currently working on a CRUD application, and with the click of a delete button, a modal will display and ask the user for confirmation before deleting the record. Once the button has been clicked, I want to retrieve HTML text within a specific element used for AJAX call data. However, what I have tried so far is not being logged to the console; even when I change the global variable to var deleteLocationID = "test"; I doubt the modal displaying will affect the click function?
The code:
var deleteLocationID;
$("#deleteLocationBtn").click(function () {
deleteLocationID = $(document).find(".locationID").val();
console.log(deleteLocationID);
});
What I have tried so far:
Changing "deleteLocationID = $(document).find(".locationID").val();" to the following variations:
deleteLocationID = $(document).find(".locationID").html();
deleteLocationID = $(".locationID").val() / deleteLocationID = $(".locationID").html();
deleteLocationID = document.getElementsByClassName("locationID").value;
Any help would be much appreciated.

Use the text() method from JQuery, with this you can get the text inside of your element.
Use this way, it may help you:
deleteLocationID = $(document).find(".locationID").text()
Here is example of getting text from class element:
$('.locationID').text()
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<div class="locationID">45</div>

It depends on the type of element you are trying to find your value.
for input types you can find the value by .val() in jQuery like:
$(document).find(".locationID").val();
you can grab innerHTML of the element by .html() in jQuery like:
$(".locationID").html();
but if you want to grab innerText of an element you can use .text() in jQuery like:
$(".locationID").text();

How To fetch the value of a DIV

I have integrated froala editor on my HTML page. I need to fetch the data I have written inside the div with its HTML properties.
Below is my code:
html
<button>
click
</button>
<div id="froala-editor-br">
The editor can use <code>BR</code> tags. When ENTER key is hit, a <code>BR</code> tag is inserted.
</div>
js code
$('div#froala-editor-br').froalaEditor({
enter: $.FroalaEditor.ENTER_BR
});
$("button").click(function(){
var chk = $('#froala-editor-br').html();
alert(chk);
});
And here is the working jsfiddle
If you press the click button, it is fetching the froala code, not the code I am entering.

Just replace your code with below script.
$("button").click(function(){
var chk = $('#froala-editor-br').froalaEditor('html.get');
alert(chk);
});
Here is the documentation link.
getHTML

Just need to update selector in the one line inside button click function to:
var chk = $('#froala-editor-br .fr-element').html();

The froala editor adds its own divs dynamically and wraps many elements. If you want only the text inside the resulting editor, you need to change your selector.
So, your selector should be $('#froala-editor-br .fr-view') instead.
As in:
$("button").click(function() {
var chk = $('#froala-editor-br .fr-view').text();
alert(chk);
});
As mentioned in the comments, #Smit Raval's answer uses the API for the froala editor and it seems like a better option to use that instead.

Pure JS code
let button = document.querySelector("button");
let div = document.getElementById("froala-editor-br");
button.addEventListener("click", function(e){
alert(div.innerHTML);
});

how to get document property value in html script

Is there a way to get document property values into html script in text area.
for example:
I have a drop down which have values like "google","yahoo","Facebook"
and my html script may be like
< SpotfireControl id="a23e53a498af447294614ec708f50ede" /> A href="http://www.Document propety value.com/">.
So if you select google in drop down ,the above html script will change to
< SpotfireControl id="a23e53a498af447294614ec708f50ede" /> A href="http://www.google.com/">
I want to see this dropdown and link in one text area.
much appreciated

If your tag is as follows:
<a id="mylink" href="">
Then you can set the href like so:
document.getElementById("mylink").href = "https://google.com";
If your select has an id="myselect", you can get the value like so:
document.getElementById("myselect").value
Now you can set your link:
var site = document.getElementById("myselect").value;
document.getElementById("mylink").href = "https://"+site+".com";
Now, you want this to happen when you change the drop-down (select) option, so you'll need to add an event listener for when it changes.
document.getElementById("myselect").addEventListener("change",
function() {
var site = document.getElementById("myselect").value;
document.getElementById("mylink").href = "https://"+site+".com";
}
}
Do note that your event listener can only be added after the selector and the link have loaded (so the code needs to be afterwards). If you've never used JavaScript before, you should note that you need <script type="text/javascript"> and </script> tags to enclose it.

How to change div content while generating a new URL - AJAX?

sorry for the basic question!
I currently have a website and I need a feature where the content of a div is replaced when a user clicks on a hyperlink
I've achieved this using the following:
Click here
<script type="text/javascript"><!--
function ReplaceContentInContainer(id,content) {
var container = document.getElementById(id);
container.innerHTML = content;
}
</script>
However, I have 2 quick questions - the in the div once the button has been clicked is written as a string in the JS - is it possible to pass in a HTML file that has this text?
I need to make it so that the new text has a new URL - is this possible? (e.g. once a user has clicked on the button, the text is displayed and a new direct URL is available)

I'm assuming you mean something like this:
$('#my-link').on('click', function() {
$('#my-div').load('/file_to_load.html');
$(this).attr('href', "new_url");
});
If you can provide a bit more clarity, I'll refine my answer!
Here's how this works.
jQuery looks for the dom element with the id #my-link, then on click the function block is fired. jQUery $.load will load the content of that url into the div with the id my-div, then change the href attribute of $(this), "this" being the button to "new_url".

get the html of element itself using jquery .html()

How to get the html of element itself using Jquery html. In the below code I would like get the input element inside div using JQuery as shwon below
<div id="content">content div</div>
<input type='text' id="scheduledDate" class="datetime" />
$(function() {
console.log($('#scheduledDate').html('dsadasdasd'));
$('#content').html($('#scheduledDate').html());
});
EDIT:
Can I get the $("#scheduledDate") as string which represent the real html code of the input box, because my final requirement is I want to pass it to some other SubView( I am using backboneJS) and eventually use that html code in a dust file.
My original requirement was to get that input field as string so that I can pass it to some other function. I know, if I keep it inside a DIV or some other container, I can get the html by using .html method of JQuery. I dont want use some other for that purpose. I am just trying to get html content of the input box itself using it's id.

If you want to move the input element into div, try this:
$('#content').append($('#scheduledDate'));
If you want to copy the input element into div, try this:
$('#content').append($('#scheduledDate').clone());
Note: after move or copy element, the event listener may need be registered again.

$(function() {
var content = $('#content');
var scheduledDate = $('#scheduledDate');
content.empty();
content.append(scheduledDate.clone());
});
As the original author has stated that they explicitly want the html of the input:
$(function() {
var scheduledDate = $('#scheduledDate').clone();
var temporaryElement = $('<div></div>');
var scheduleDateAsString = temporaryElement.append(scheduledDate).html();
// do what you want with the html such as log it
console.log(scheduleDateAsString);
// or store it back into #content
$('#content').empty().append(scheduleDateAsString);
});
Is how I would implement this. See below for a working example:
https://jsfiddle.net/wzy168xy/2/

A plain or pure JavaScript method, can do better...
scheduledDate.outerHTML //HTML5
or calling by
document.getElementById("scheduledDate").outerHTML //HTML4.01 -FF.
should do/return the same, e.g.:
>> '<input id="scheduledDate" type="text" value="" calss="datetime">'
if this, is what you are asking for
fiddle
p.s.: what do you mean by "calss" ? :-)

This can be done the following ways:
1.Input box moved to the div and the div content remains along with the added input
$(document).ready(function() {
var $inputBox = $("#scheduledDate");
$("#content").append($inputBox);
});
2.The div is replaced with the copy of the input box(as nnn pointed out)
$(document).ready(function() {
var $inputBox = $("#scheduledDate");
var $clonedInputBox = $("#scheduledDate").clone();
$("#content").html($clonedInputBox);
});
Div is replaced by the original input box
$(document).ready(function() {
var $inputBox = $("#scheduledDate");
$("#content").html($inputBox);
});
https://jsfiddle.net/atg5m6ym/4485/
EDIT 1:
to get the input html as string inside the div itself use this
$("#scheduledDate").prop('outerHTML')
This will give the input objects html as string
Check this js fiddle and tell if this is what you need
https://jsfiddle.net/atg5m6ym/4496/