Can't use document.getElementById().innerHTML to rewrite the original html - javascript

I am tring to add some content after the original content, but the new content will cover the original content everytime...What wrong in this case? (Sorry for my terrible english...)
var originaltext = document.getElementById("id").innerHTML;
document.getElementById("id").innerHTML = originaltext + "newtext";
One more thing,I tried to use alert to show the "originalltext", but it have nothing to show.
alert(originaltext);

your code looks ok to me. I made a jsfiddle for you just to see that it works http://jsfiddle.net/3mqsLweo/
var myElement = document.getElementById('test');
var originalText = myElement.innerHTML.toString();
myElement.innerHTML = originalText+" new text";
check that you only have one element with the id "cartzone"

A simple and fast way to do this is to concatenate the old value with the new.
document.getElementById('myid').innerHTML += " my new text here"

this problem usually occurs when the rest of your code is poorly written and contains errors or when the same ID is used several times.
I had the same problems in the past.
you have tow options:
check the rest of your code (validate)
use jQuery - I don't know how, but it works every time.

Related

What is a faster alternative to using document.getElementById('element-id').innerHTML?

I'm making a simple step-by-step wizard for my website which asked viewers questions about their custom order. I've been using JavaScript to replace the content of each "page" with the document.getElementById('element-id').innerHTML command; however, it seems really slow and awkward to add entire divs as a string. For example, some of the code looks something like this:
function loadNextStep() {
document.getElementById('content').innerHTML = 'This is some content.<br>It seems like I need to write everything in one line to make the command work properly.<br><input type="date" id="date-picker" value=""></input>'
}
I'd love to be able to write some multi-line html code, and say "replace everything with this new html."
Is there a faster way of doing the same thing?
Thank you again!
I don't think getElementById or querySelector will make any difference, since the heavier stuff is done when you add a bunch of html elements as a string despite the fact that innerHTML can be vulnerable to cross site scripting if the output of that string has user input commands in it.
But if you still want to do this way you can do by using `` backticks to add as many lines as you'd like.
However, the way I would do is to create those elements on a different function and then output them to your loadNextStep function, then adding to your #content element using the appendChild method.
Here's a quick example of I would do:
function loadNextStep() {
var content = document.getElementById('content');
var step = step1();
step.forEach( stepContent => {
content.appendChild( stepContent );
})
}
function step1() {
var someContent = document.createElement('span');
someContent.innerText = `This is some content. It seems like I need to write everything in one line to make the command work properly.
Yes, but if you use backticks you can have multiple lines.`;
var input = document.createElement('input');
input.type = 'date';
input.id = 'date-picker';
return [ someContent, input ]
}
loadNextStep();
<div id="content">
</div>

How to select something from a textarea. Creating my editor

I've been searching for a few hours, trying with so many different solutions but anything works for me.
I'm building my own text editor in jQuery, but now I'm facing a problem:
I have this code right now:
function bbcode() {
var div = document.querySelector('textarea');
var start = div.selectionStart;
var finish = div.selectionEnd;
var text = div.value.substring(start, finish);
div.value('[b]' + text + '[/b]');
}
And this too:
$('#bold').click(function(evt) { bbcode(); });
#bold is a button and I want that when I click, it adds me the first part of the bbcode ([b]), the text I've already selected and the last part of the bbcode.
But it doesn't work for me. Where's the problem?
Thanks for reading and helping.
PD: I hope I have explained well.
Cheers.
You are assigning it wrongly. value is not a function which accepts parameter. It is instead a property which can be assigned to.
div.value = '[b]' + text + '[/b]'; // setter
DEMO

jQuery how to insert <br/> tag after every Semicolon

I am dumping some CSS into a div and I am looking to format it so it is more legible. Basically what I want to do is insert a break tag after every semicolon. I have searched around for a while but can't seem to find something that quite fits what I am trying to do.
I have something like this...
HTML
<div class='test'>
color:red;background-color:black;
</div>​
jQuery
var test = $('.test').text();
var result = test.match(/;/g);
alert(result);​
And I have tried..
var test = $('.test').text();
var result = test.match(/;/g);
result.each(function(){
$('<br/>').insertAfter(';');
});
alert(result);​
Also I have started a fiddle here.. Which basically just returns the matched character...
http://jsfiddle.net/krishollenbeck/zW3mj/9/
That is the only part I have been able to get to work so far.
I feel like I am sort of heading down the right path with this but I know it isn't right because it errors out. I am thinking there is a way to insert a break tag after each matched element, but I am not really sure how to get there. Any help is much appreciated. Thanks...
try it like this
var test = $('.test').text();
var result = test.replace(/\;/g,';<br/>');
$('.test').html(result);​
http://jsfiddle.net/Sg5BB/
You can use a normal javascript .replace() method this way:
​$(document)​.ready(function(){
$(".test").html($(".test").html().replace(/;/g, ";<br />"));
});​
Fiddle: http://jsfiddle.net/SPBTp/4/
Use This CODE
var test = $('.test').text();
var result = test.split(';').join(';<br />')
http://jsfiddle.net/FmBpF/
You can't use jQuery selectors on text, it only works on elements.
Get the text, just replace each ; with ;<br/>, and put it back.
$('.test').html($('.test').text().replace(/;/g, ';<br/>'));
Try something like this :
var test = $('.test').text();
var result = test.replace(/;/g,";");
$('.test').html(result);
​
That should work if you stick it into your jfiddle.

Insert a whole element into another element, not just its inner HTML

I'm trying to figure out how to use jQuery to construct HTML as sanely as possible. As far as I can tell, this should produce <div><span>Alice</span></div>, but instead produces <div>[object Object]</div>:
post = $("<div>");
username = $("<span>").html("Alice");
post.append(username);
I've found that replacing the last line with post.append(username.html()) gets me closer to my goal, but it omits the <span> tags if I do it that way. How do I insert a child element with the surrounding tags, and without writing out "<span>" + username + "</span>", which seems like a novice approach to the task?
EDIT: Stupid mistake. The snippet I posted above was excessively simplified; I was really trying to do post.append(username + another_span_element) in my code. Obviously I can't append objects like that. I've changed it to post.append(username); post.append(another_span_element); and now it works fine. Durr!
Works for me: $("<div>").append($("<span>").html("Alice"))[0].outerHTML == "<div><span>Alice</span></div>"
What you're aiming for is done with the text() method:
post = $("<div>");
username = $("<span>").text("Alice");
post.append(username);
Example here.
Is there a reason for not doing:
$('<div><span>Alice</span></div>').appendTo('body');
or
var username = "Alice";
$('<div><span id="user"></span></div>').appendTo('body');
$(username).appendTo('#user');
or
var username = "Alice";
$('<div><span id="user"></span></div>').appendTo('body');
$('#user').html(username);
or
var username = "Alice";
$('<div><span id="user"></span></div>').appendTo('body');
$('#user').text(username);
or any of the other 200 options?

JQUERY FIND:FIRST not finding the first Paragraph?

Goal, is to extract the content for the CKEDITOR Text Editor, and then only obtain the FIRST paragraph. For some reason the bellow isn't working... Ideas?
Given the following JavaScript:
var newTitle = CKEDITOR.instances.meeting_notes.getData();
newTitle = $(newTitle).find("p:first").text();
It doesn't work because find() searches the descendants and your paragraph must be at the top level of the HTML you're searching.
For example:
alert($("<p id='one'>one</p><p id='two'>two</p>").find("p:first").attr("id"));
returns "undefined" whereas:
alert($("<p id='one'>one</p><p id='two'>two</p>").filter("p:first").attr("id"));
will output "one".
So you could use filter() if you know it's at the top level (possibly falling back to find()). Alternatively you could wrap the whole lot up in a dummy element:
alert($("<div>" + html + "</div>").find("p:first").text());
Edit: My advice? Use:
newtitle = $(newtitle).filter("p:first").text();
I am not sure if works for you, but just try putting a space before :first,
for some reasons i can't explain this works as far my experience is concerned:
The new selector for find would now be, find("p: first")
var newTitle = CKEDITOR.instances.meeting_notes.getData();
newTitle = $(newTitle).find("p :first").text();
BTW can you post some sample values of the newTitle, just curious of what it looks like!
This is completely untested, but assuming that what getData returns is a string of HTML, try this:
newTitle=$("<div>").html(newTitle).find("p:first").text();

Categories