using other method than innerHTML in js?

Question

<div id="content">
    <h1>Redigeringsbara stycken</h1>
    <p class="editable">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</div>

//JAVASCRIPT

window.onload = function  () {
    /*
    var pElements = document.getElementsByTagName('*');
    for (var i=0; i < pElements.length; i++) {
        if(pElements[i].className == 'editable')
            inPlaceEditor(pElements[i]);
    };
    */
   document.onclick = catchIt;
};

function inPlaceEditor (editableElement) {

}

var editing = false;

if (document.getElementById && document.createElement)
{
   var butt = document.createElement('BUTTON');
    var buttext = document.createTextNode('Ready!');
    butt.appendChild(buttext);
    butt.onclick = saveEdit;
}

function catchIt(e) {
    if (editing) {
          alert("U're still editing!!");
        return;
    }
    if (!document.getElementById || !document.createElement) return;
    if (!e) var obj = window.event.srcElement;
    else var obj = e.target;
    while (obj.nodeType != 1) {
        obj = obj.parentNode;
        alert(obj.nodeType);
    }
    if (obj.tagName == 'textarea' || obj.tagName == 'a') return;
    while (obj.nodeName != 'P' && obj.nodeName != 'HTML')
    {
        obj = obj.parentNode;
        alert(obj.nodeName);
    }
    if (obj.nodeName == 'HTML') {
        // alert ("this is HTML");
        return;
    }
    //other way to grab the text instead of innerHTML-method????
    var targetInnerHtml = obj.innerHTML;
    var textArea= document.createElement('textarea');
    var parentnode = obj.parentNode;
    parentnode.insertBefore(textArea, obj);
    parentnode.insertBefore("<br />", obj);
    parentnode.insertBefore(butt, obj);
    parentnode.removeChild(obj);
    textArea.value = targetInnerHtml ;
    textArea.focus();
    editing = true;
}

function saveEdit() {
    var area = document.getElementsByTagName('textarea')[0];
    var paragraph = document.createElement('P');
    var parentnode = area.parentNode;
    paragraph.innerHTML = area.value;
    parentnode.insertBefore(paragraph, area);
    parentnode.removeChild(area);
    parentnode.removeChild(document.getElementsByTagName('button')[0]);
    editing = false;
}

HELLO GULRS AND BOYS! Im wondering if: 1- there's another way to grab the html-text instead of using innerHtml- method? for those who work in Jquery would it be easier to implement this code in Jquery? lest lines, faster maybe? gracias! :)

You may know about this already and dislike its lack of functionality for adding new elements or editing attributes and whatnot, but contenteditable="true" will make the text content of a node and its child elements editable by the user. This works for me in Chrome, FF and IE8. See here for an example. — brymck
– brymck, Commented May 28, 2011 at 9:17
@Bryan hi there! CAnt follow u! u didnt write any code in yr example? — YoniGeek
– YoniGeek, Commented May 28, 2011 at 11:07
@Bryan what do u mean? u didn't write any code in yr example? what is this contenteditable="true? — YoniGeek
– YoniGeek, Commented May 28, 2011 at 11:08
Click the link ("See here for an example") at the end of my comment or follow this: jsfiddle.net/JxyGB In any case, if you want an entire div to be editable, you would write <div contenteditable="true">. Note that the specifics of its implementation vary from browser to browser, but the basics are fairly good cross-browser. It's actually been around since IE5.5. — brymck
– brymck, Commented May 28, 2011 at 11:18

marc_s · Accepted Answer · 2017-02-19 21:59:41Z

1

You can make it simple if you can use jQuery. What is the event used by you?

You can use the jQuery html() method to get/set the innerHTML.

To get innerHTML

$(obj).html()

To set it:

$(textArea).value(targetInnerHtml)

edited Feb 19, 2017 at 21:59

marc_s

760k186 gold badges1.4k silver badges1.5k bronze badges

answered May 28, 2011 at 8:53

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Arun P Johny Over a year ago

Can u tell us what exactly u r looking for? What I understood is if you click on an p or html element then you are creating a textarea and adding the content of the clicked element to the text area, is it correct?

YoniGeek Over a year ago

it's very correct! I want to edit the text that I click on..basically.

RobG · Accepted Answer · 2011-05-28 09:03:02Z

0

It seems that you just want the text, so you can write:

var targetText = obj.textContent || obj.innerText;

A more robust version is:

if (typeof obj.textContent == 'string') {
    targetText = obj.textContent;
} else if (typeof obj.innerText == 'string') {
    targetText = obj.innerText;
}

Which can be turned into a function so you can call it rather than having to write the above each time.

Other comments:

function catchIt(e) {
editing = false;

  if (editing) {

How will editing ever be true?

  parentnode.insertBefore(butt, obj);

butt is not declared or initialised anywhere.

answered May 28, 2011 at 9:03

RobG

148k32 gold badges180 silver badges216 bronze badges

3 Comments

YoniGeek Over a year ago

editing is true at the end of the catchIt function...as long as u are inside editing the text is true...are u follwing me?

brymck Over a year ago

@YoniGeek I believe Rob was saying that the original if (editing) {...} statement doesn't do anything, because you declare editing will be false right before it. Maybe it makes sense in other functions, but here the if statement will never evaluate under any circumstance.

YoniGeek Over a year ago

@Bryan if I may Bryan: It's not actually true.If u taste the code I wrote an alert to prove this behavior...click on the text than try to click somewhere else, u'll not be able to do anything than the editing....in this way I check if the user is still editing the text. are u following me? :)

Collectives™ on Stack Overflow

using other method than innerHTML in js?

2 Answers 2

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related