mi herramienta genera parrafos uno a la vez dinamicamente y lo inserta en el dom, mi parrafo contiene la frase parrafo editable, Hasta aqui todo bien el problema surge cuando viene la necesidad de editar un parrafo especifico por ejemplo si tengo cinco parrafos y quiero editar el ultimo deberia de entrar a mi codigo o a la consola y acceder por el indice y usar la funcion innerhtml, lo ideal para mi seria poder modificarlo sin necesidad de entrar a mi codigo y hacerlo por medio de una funcion, para esto he pensado en crear un boton junto al lado de cada parrafo que pueda modifcar el texto.
me olvide de decir que mis botones tambien se generan dinamicamente, ok despues de esto me gustaria tambien poder guardar el codigo generado para poder continuarlo en otro momento, el codigo que dejo a continuacion es solo el generador de parrafos con el codigo que almacena la frase de mi parrafo en local.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
var articulos = [];
function generacion(){
contenido = document.body;
elemento = document.createElement('div');
capa = contenido.appendChild(elemento);
parrafo = document.createElement('p');
parrafocreado = capa.appendChild(parrafo);
art1 = parrafocreado.innerHTML="parrafo editable";
articulos.push(art1);
arrayjson = JSON.stringify(articulos);
localStorage.setItem('articulos', arrayjson);
}
var arts = localStorage.getItem('articulos');
var recupero = JSON.parse(arts);
recupero.toString();
function editar()
{
parrafos = document.getElementsByTagName('p');
campo = document.getElementById('campo').value;
parrafos[0].innerHTML = campo;
}
</script>
</head>
<body>
<h4>gestor de contenidos</h4>
<button onclick="generacion()">generar elemento</button>
<div>
<p>parrafo editable</p>
<button onclick="editar()">edit</button>
<input type="text" id="campo">
</div>
</body>
</html>