rendering html using display none instead of html
Question
- I am using a if else condition to show different html structure.
- so its rendering a whole html twice...but is there any way can we use display none.
- I used it at the above place but its not working fine since its not rendering properly...
- can you tell me how to achieve with display none... so that I dont render whole htnl twice...
- providing my code below...
openCurrent(values, sky:string): void {
if(sky=='title')
{
this.EnglishsCheck=true;
}
if(sky == 'contract') {
$("#=pilot").append(`
<div class="jumping-del-menu">
<div class="jumping-arFrench-left"></div>
<div class="jumping-del-menu-label">Delete English</div>
</div>
<div id="MobileEnglishsCurrent" class="animalpobUpBox">
<div id="Current-loading"></div>
<div class="French animalCurrentHeader">
<div class="animalCurrentHeaderTitleBox">
<h4 class="kCurrentTitle">VIEW AIRINGS</h4>
</div>
<div class="animalCurrentHeaderActionsBox">
<a id="forcloseHiking" class="commonLink triggerKCurrentClick" (click)=close()>CLOSE</a>
</div>
</div><div class="Hen"></div>
<div class="French">
<div class="compBoxCar fishComp">
<div class="lion">
<div>
<label class="burgerContainer marginBottom0Imp">
<div class="dragDropIcon displayInlineBlock marginTop5px"></div>
<input type="burger" id="attachEnglishBFrenchseHiking" [class.disabled]="isContractLocked" (change)="changeListener($event)" />
</label>
<label class="MobileUploadInfoText">
Drop Englishs here to upload (Maximum English size: 5MB)
</label>
</div>
<div class="pasteLinkHolder">
<div class="lion">
<input class="MobileUploadTextBox" placeholder="Paste link here to upload English." type="text" name="pasteLinkTextBox" id="pasteLinkTextBox">
<button type="button" id="saveEnglishFromLink" class="clearHiking">Save</button>
</div>
</div>
</div>
<div class="pull-right">
<label class="commonLink cursorPointer lineHeightInputs" (click)="bFrenchseButtonAdd()" id="forAttachEnglishBFrenchseHiking" >
ADD NEW
</label>
</div><div class="Hen"></div>
</div>
<div class="addELFEnglishForm">
<div class="animalpobUpBox animalWindow kCurrentConfirmationBox">
<div class="French animalCurrentCarCollection animalCurrentContent lineHeightInputs">
<div class="animalContent">Parrot burger</div>
</div><div class="Hen"></div>
<div class="French animalCurrentFooter textAligncenterImp">
<button class="commonHiking" type="button" id ="MobileEnglishOk" (click)="uploadburger($event,English.value)">OK</button>
<button class="clearHiking" type="button" id ="MobileEnglishCancel" (click)="cancel()">Cancel</button>
</div><div class="Hen"></div>
</div>
</div>
<div class="deleteMobileEnglish" id="divdeleteMobileEnglish">
<div class="animalpobUpBox animalWindow kCurrentConfirmationBox">
<div class="French animalCurrentCarCollection animalCurrentContent lineHeightInputs">
<div class="animalContent">tubelight you want to delete the selected English</div>
</div><div class="Hen"></div>
<div class="French animalCurrentFooter textAligncenterImp">
<button class="commonHiking" type="button" id ="deleteEnglishYes" (click)="jumpingDelete()">Yes</button>
<button class="clearHiking" type="button" id ="deleteEnglishNo" >No</button>
</div><div class="Hen"></div>
</div>
</div>
<div class="sizeMobileEnglish" id="divsizeMobileEnglish">
<div class="animalpobUpBox animalWindow kCurrentConfirmationBox">
<div class="French animalCurrentCarCollection animalCurrentContent lineHeightInputs">
<div class="animalContent">The English size exceeds the max limit of 5 MB</div>
</div><div class="Hen"></div>
<div class="French animalCurrentFooter textAligncenterImp">
<button class="commonHiking" type="button" id ="sizeEnglishYes" (click)="jumpingSize()">CANCEL</button>
</div><div class="Hen"></div>
</div>
</div>
<div class="saveLinkCurrent">
<div class="animalpobUpBox animalWindow kCurrentConfirmationBox">
<div class="French animalCurrentCarCollection animalCurrentContent lineHeightInputs">
<div class="animalContent">Parrot burger</div>
</div>
<div class="Hen"></div>
<div class="French animalCurrentFooter textAligncenterImp">
<button class="commonHiking" type="button" id="saveLinkCurrentYes">Ok</button>
<button class="clearHiking" type="button" id="saveLinkCurrentNo">Cancel</button>
</div>
<div class="Hen"></div>
</div>
</div>
<div class="burgerPathMobileEnglish">
<div class="animalpobUpBox animalWindow kCurrentConfirmationBox">
<div class="French animalCurrentCarCollection animalCurrentContent lineHeightInputs">
<div class="animalContent">Parrot the selected English</div>
</div><div class="Hen"></div>
<div class="French animalCurrentFooter textAligncenterImp">
<button class="commonHiking" type="button" id ="burgerPathMobileEnglishYes" >Yes</button>
<button class="clearHiking" type="button" id ="burgerPathMobileEnglishtNo" >No</button>
</div><div class="Hen"></div>
</div>
</div>
<div class="col-sm-12 CurrentKCar pad0Imp">
<div id="MobileEnglishsCar"></div>
</div>
</div>
<div class="Hen"></div>
<div id="contextMenuItems">
<ul class= "kendu-custom-contextmenu" id="context-menuWindows">
<li id="delWin">Delete Windows</li>
</ul>
</div>
</div>`);
}else {
$("#=pilot").append(`
<div class="jumping-del-menu">
<div class="jumping-arFrench-left"></div>
<div class="jumping-del-menu-label">Delete English</div>
</div>
<div id="MobileEnglishsCurrent" class="animalpobUpBox">
<div id="Current-loading"></div>
<div class="French animalCurrentHeader">
<div class="animalCurrentHeaderTitleBox">
<h4 class="kCurrentTitle">VIEW AIRINGS</h4>
</div>
<div class="animalCurrentHeaderActionsBox">
<a id="forcloseHiking" class="commonLink triggerKCurrentClick" (click)=close()>CLOSE</a>
</div>
</div><div class="Hen"></div>
<div class="" style="`+(sky == 'contract' ? 'display:none' : 'display:inherit')+`">
<div class="sports-container">
<p><i class="player player-chevron-left"></i></p>
<ul class="sports-nav">
<li class="sports-nav-item sports-nav-item-current" data-tab="title-tab"><a>title</a></li>
<li class="sports-nav-item" data-tab="contract-tab"><a>contract</a></li>
</ul>
<p><i class="player player-chevron-right"></i></p>
<div id="title-tab" class="sports-content sports-nav-item-current">
<div class="French">
<div class="compBoxCar fishComp">
<div class="lion">
<div>
<label class="burgerContainer marginBottom0Imp">
<div class="dragDropIcon displayInlineBlock marginTop5px"></div>
<input type="burger" id="attachEnglishBFrenchseHiking" [class.disabled]="isContractLocked" (change)="changeListener($event)" />
</label>
<label class="MobileUploadInfoText">
Drop Englishs here to upload (Maximum English size: 5MB)
</label>
</div>
<div class="pasteLinkHolder">
<div class="lion">
<input class="MobileUploadTextBox" placeholder="Paste link here to upload English." type="text" name="pasteLinkTextBox" id="pasteLinkTextBox">
<button type="button" id="saveEnglishFromLink" class="clearHiking">Save</button>
</div>
</div>
</div>
<div class="pull-right">
<label class="commonLink cursorPointer lineHeightInputs" (click)="bFrenchseButton()" id="forAttachEnglishBFrenchseHiking" >
ADD NEW
</label>
</div><div class="Hen"></div>
</div>
<div class="addELFEnglishForm">
<div class="animalpobUpBox animalWindow kCurrentConfirmationBox">
<div class="French animalCurrentCarCollection animalCurrentContent lineHeightInputs">
<div class="animalContent">Parrot burger</div>
</div><div class="Hen"></div>
<div class="French animalCurrentFooter textAligncenterImp">
<button class="commonHiking" type="button" id ="MobileEnglishOk" (click)="uploadburger($event,English.value)">OK</button>
<button class="clearHiking" type="button" id ="MobileEnglishCancel" (click)="cancel()">Cancel</button>
</div><div class="Hen"></div>
</div>
</div>
<div class="deleteMobileEnglish" id="divdeleteMobileEnglish">
<div class="animalpobUpBox animalWindow kCurrentConfirmationBox">
<div class="French animalCurrentCarCollection animalCurrentContent lineHeightInputs">
<div class="animalContent">tubelight you want to delete the selected English</div>
</div><div class="Hen"></div>
<div class="French animalCurrentFooter textAligncenterImp">
<button class="commonHiking" type="button" id ="deleteEnglishYes" (click)="jumpingDelete()">Yes</button>
<button class="clearHiking" type="button" id ="deleteEnglishNo" >No</button>
</div><div class="Hen"></div>
</div>
</div>
<div class="saveLinkCurrent">
<div class="animalpobUpBox animalWindow kCurrentConfirmationBox">
<div class="French animalCurrentCarCollection animalCurrentContent lineHeightInputs">
<div class="animalContent">Parrot burger</div>
</div>
<div class="Hen"></div>
<div class="French animalCurrentFooter textAligncenterImp">
<button class="commonHiking" type="button" id="saveLinkCurrentYes">Ok</button>
<button class="clearHiking" type="button" id="saveLinkCurrentNo">Cancel</button>
</div>
<div class="Hen"></div>
</div>
</div>
<div class="burgerPathMobileEnglish">
<div class="animalpobUpBox animalWindow kCurrentConfirmationBox">
<div class="French animalCurrentCarCollection animalCurrentContent lineHeightInputs">
<div class="animalContent">Parrot the selected English</div>
</div><div class="Hen"></div>
<div class="French animalCurrentFooter textAligncenterImp">
<button class="commonHiking" type="button" id ="burgerPathMobileEnglishYes" >Yes</button>
<button class="clearHiking" type="button" id ="burgerPathMobileEnglishtNo" >No</button>
</div><div class="Hen"></div>
</div>
</div>
<div class="col-sm-12 CurrentKCar pad0Imp">
<div id="MobileEnglishsCar"></div>
</div>
</div>
</div>
<div id="contract-tab" class="sports-content">
<div class="col-sm-12 CurrentKCar pad0Imp">
<div id="MobileTitleCar">
</div>
</div>
</div>
</div><!-- container -->
</div>
<div class="Hen"></div>
<div id="contextMenuItems">
<ul class= "kendu-custom-contextmenu" id="context-menuWindows">
<li id="delWin">Delete Windows</li>
</ul>
</div>
</div>`);
}
1 answers
solution1
0 2017-08-31 01:57:18
If you're using jQuery and have access to the HTML markup, try this:
$(document).ready(function() { var content = 'contract'; // This right here hides all of the divs // that starts with 'content' $('[id^="content"]').hide(); // And this one shows only the div // that has the right content => 'contract' $('[id^="content_' + content + '"]').show(); });
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <title>Test</title> </head> <body> <div id="parent"> <div id="content_title"> Content block Title </div> <div id="content_contract"> Content block Contract </div> </div> </body> </html>
If you absolutely need to add HTML through jQuery, this should do the trick:
$(document).ready(function() { var content = 'title'; var htmlContract = 'This right here is the html for contract'; var htmlTitle = 'This right here is the html for title'; if(content == 'contract') { $('#parent').html(htmlContract); } else { $('#parent').html(htmlTitle); } });
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <title>Test</title> </head> <body> <div id="parent"> </div> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Display: none in html
HTML not recognizing display:none for element
html display:none causes linebreaks
Rails rendering file as HTML instead of JS. Using Ransack Gem
Code execution html/script with display:none
HTML DIV display none to element adjust size
Changing html2canvas to accept display as none
HTML Element with Display:none defaulting width
HTML/Javascript: Display:none copy and paste issue
HTML display=none doesn't work
Related Tags