Dodawanie kodu HTML w dokumencie HTML jako przykładowy kod (możliwy do edycji za pomocą JS) ;)

pytanie zadane 6 kwietnia 2017 w HTML i CSS przez V1nc3e Nowicjusz (120 p.)

Witam serdecznie wszystkich Pasjonatów!

Otóż mam problem, z którym niestety nie potrafię sobie do końca poradzić. Dodając, że na razie czuję się tylko w miarę pewnie w technologiach frontendowych - HTML, CSS, JS (wraz z jQuery) - i całkiem prawdopodobne jest to, że właśnie to nie pozwala mi na rozwiązanie problemu.

Mianowicie tworzę sobie projekt w którym użytkownik będzie mógł edytować stworzony przeze mnie slider, chciałbym umieścić na stronie HTML generatora slidera, kod który napisałem jako w pełni działający slider, lecz wiadomo jeżeli umieszczam na stronie kod ze znacznikami HTML typu <div> to przeglądarka od razu wykonuje ten kod i przetwarza go.

A to co chciałbym uzyskać to wkleić cały kod HTML, CSS, JS w poszczególnych polach a następnie przy pomocy utworzenia dodatkowych <span id="#"> edytować zawartość tego kodu przy pomocy JS, a następnie w wysuwanym z boku oknie wyświetlić source code, wyedytowany przez użytkownika ze wszystkimi znacznikami <div>...

Wiem, że można coś takiego zrobić i zamiast <div> dodać go jako &lt div &gt, ale chyba nie jest to z zbyt optymalne rozwiązanie.


&lt img src="<span id="urlToImg7">http://img.cda.pl/obr/oryginalne/850ca7d90566b9ed82c60d9d50771230.jpg</span>" class="slideIMG" &gt

Tak jak powyżej na stronie HTML Generator zawarty jest kod ze strony HTML Slider, skryptem chciałbym dać możliwość użytkownikowi dodania linku do swojego ulubionego obrazka a następnie aby skopiował cały kod i mógł go wyświetlić i użyć np na swojej stronie? Czy można zamienić &lt i &gt jakoś inaczej, aby kod był bardziej przejrzysty? :D

Najprościej pytanie brzmi czy można zagnieździć kod HTML w dokumencie HTML a następnie normalnie przy pomocy JS edytować jego zawartość? A następnie wyświetlić wyedytowany kod użytkownikowi aby go skopiował w całości i np. wkleił na JSFiddle i sobie go uruchomil? :D

Czy może powinienem poduczyć się czegoś z innych technologii co może mi pomóc? Będę bardzo wdzięczny za każdą wskazówkę! Dodam, że jestem stosunkowo początkującym ''programistą" - bardziej hobbystą, dopiero 2,5 miesiąca nauki za mną i może taki projekt okazać się zbyt ambitny :D

Mam nadzieję, że nie za bardzo skomplikowałem problem opisując go, po prostu ciężko mi jest to ubrać w słowa.

1 odpowiedź

odpowiedź 6 kwietnia 2017 przez marcin99b Szeryf (82,180 p.)

Nie rozumiem za bardzo o co chodzi.
Jeśli chcesz dodać element za pomocą JS możesz użyć klasycznego document.getElementById("twójElement").innerHTML
Wybierasz tag do którego chcesz wrzucić swój element i go tam dodajesz.

komentarz 6 kwietnia 2017 przez V1nc3e Nowicjusz (120 p.)
edycja 6 kwietnia 2017 przez V1nc3e

Przykład:

<!DOCTYPE html>
<html>
<head>



<script>
$(document).ready(function(){
 
$('#bttn').click(function(){
 
var userInput = $('#myInput').val();
 
$("#myDiv").html("&ltimg src='"+userInput+"'&gt");
 
});
 
});

</script>
</head>
<body>
&lt img src="<div id="obrazek1">www.obrazek.pl</div>"&gt 
 
 
<input type="text" id="myInput">
<button id="bttn">Generuj kod!</button>
 
<div id="myDiv"></div>
</body>
</html>

I załóżmy, że użytkownik w myInput wkleja link obrazka następnie wciska przycisk i generuje mu się kod w myDiv który sobie później wkleja w JSfiddle i odpala mu się obrazek :D

Rozumiesz o co chodzi? Że użytkownik sobie wybiera różne opcje a następnie pokazuje mu się kod który sobie może wkleić w jakiś kompilator i zobaczyć efekt swojego działania :D

Kurcze nie wiem jak lepiej to opisać :D :D :D

I pytanie jest takie czy da się jakoś inaczej to zrobić i zastąpić te znaki &lt &gt? :D

Bo tak utworzony <img> działa tak jakbym chciał w sensie, że utworzony link sobie kopiuje wklejam w JSFiddle w sekcji HTML i otwiera mi się obrazek :D

komentarz 7 kwietnia 2017 przez marcin99b Szeryf (82,180 p.)

użyj tagu <plaintext>
niby nie wiem jak go zamknąć bo klasyczne </ mi nie działa, ale to jest jeden ze sposobów.
podobno w tagu <pre> również da się wyświetlać kod, ale u mnie to nie działa