0
votes

innerHTML s'affichant différemment des attentes

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
   </head>
   <body>
      <ul>
         <li id=1 class="draggable" draggable="true">
            <div class="input-group" >
               <p draggable="false" style="width:400px; outline: none" >Text</p>
               <button onclick="testFunction(this)">update</button>
            </div>
         </li>
      </ul>
      <button onclick="myFunction()">Try it</button>
      <p id="demo"></p>
      <script>
         function myFunction() {
           document.getElementById("demo").innerHTML = document.getElementById(1).innerHTML;
         }
         function testFunction(el) {
           var attr = document.createAttribute('contenteditable');
           attr.value = 'true';
           el.parentNode.firstElementChild.setAttributeNode(attr)
           el.parentNode.firstElementChild.focus()
         }
      </script>
   </body>
</html>

Lorsque vous appuyez sur le bouton "Mettre à jour" et que vous ajoutez du nouveau texte et des lignes au paragraphe et que vous appuyez sur le bouton "Essayer", la nouvelle ligne apparaît. Je m'attendais à ce que ce soit la même chose, puisque j'ai copié le innerHTML.

javascript html css dom

3 commentaires

document.getElementById (1) n'est pas ce que vous voulez. Les valeurs des éléments HTML id sont des chaînes. Utilisez document.getElementById ('1') , mais vous devez toujours utiliser les valeurs d'élément id qui commencent par des lettres et non par des chiffres.

De plus, vous devriez éviter d'utiliser .innerHTML car c'est une opération coûteuse (car cela signifie que le texte doit être analysé et traité par le navigateur). Il est beaucoup plus rapide (et plus simple, imo) d’utiliser à la place parent.appendChild (other.cloneNode ()) , voir developer.mozilla.org/en-US/docs/Web/API/Node/cloneNode

Est-ce que cela répond à votre question? comment ajouter un nouveau

en cliquant sur avec javascript

3 Réponses :

2
votes

Lorsque vous créez un élément HTML et que vous lui attribuez un identifiant, l'identifiant doit être entre guillemets, et il doit également contenir au moins 1 caractère et pas d'espaces blancs , donc je suggère de changer l ' id de votre élément li de id = 1 à id = "1a" (ou quelque chose avec une lettre dedans), et document.getElementById ("1a"). innerHTML devrait être remplacé par cette nouvelle valeur (dans cet exemple, "1a")

0 commentaires

0
votes

Si vous vous attendez à ce que la ligne ressemble à une liste à puces, vous devez placer le résultat de innerHTML dans une liste non ordonnée. Pour le moment, vous le placez dans un paragraphe.

Pensez à remplacer

par:

<ul>
  <li id="demo"></li>
</ul>

0 commentaires

0
votes

Ok, donc écrire une histoire courte id = 1 ou id = '1' ne pose aucun problème. Il saisit toujours le HTML et fonctionne bien. Le problème est avec la balise p lorsque vous mettez quelque chose dans la balise P, elle commence à se comporter différemment et la balise de rupture (BR) n'affichait pas les sauts de ligne. J'ai changé P en Div et ça a l'air bien maintenant. J'ai également changé / supprimé la classe CSS .input-group { position: relative; affichage: -ms-flexbox; / * affichage: flex; Vous pouvez maintenant voir les sauts de ligne.

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
   </head>
   <body>
      <ul>
         <li id="1" class="draggable" draggable="true">
            <div  >
               <p id='editable' draggable="false" style="width:400px; outline: none" >Text</p>
               
            </div>
         </li>
      </ul>
<button onclick="testFunction('editable')">update</button>
      <button onclick="myFunction()">Try it</button>
      <div id="demo"></div>
      <script>
         function myFunction() {
           document.getElementById("demo").innerHTML = document.getElementById(1).innerHTML;
         }
         function testFunction(el1) {
          el= document.getElementById(el1);
           var attr = document.createAttribute('contenteditable');
           attr.value = 'true';
           el.parentNode.firstElementChild.setAttributeNode(attr)
           el.parentNode.firstElementChild.focus()
         }
      </script>
   </body>
</html>

0 commentaires